上部に三角形を持つ境界

CSSCSSBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、CSSを使って上部に三角形を持つコンテンツコンテナを作成する方法を学びます。これは、多くのウェブサイトやアプリケーションで使用される一般的なデザイン要素であり、視覚的な興味を加え、階層感を与えます。この実験が終了するまでに、この効果を作成して独自のプロジェクトに適用するスキルを身につけるでしょう。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35170{{"上部に三角形を持つ境界"}} css/colors -.-> lab-35170{{"上部に三角形を持つ境界"}} css/margin_and_padding -.-> lab-35170{{"上部に三角形を持つ境界"}} css/borders -.-> lab-35170{{"上部に三角形を持つ境界"}} css/positioning -.-> lab-35170{{"上部に三角形を持つ境界"}} css/backgrounds -.-> lab-35170{{"上部に三角形を持つ境界"}} css/pseudo_elements -.-> lab-35170{{"上部に三角形を持つ境界"}} end

上部に三角形を持つ境界

VM内には既にindex.htmlstyle.cssが用意されています。

上部に三角形を持つコンテンツコンテナを作成するには、次の手順に従ってください。

  1. ::before::afterの疑似要素を使って2つの三角形を作成します。
  2. 三角形のborder-colorbackground-colorをコンテナと一致させます。
  3. 境界として機能するため、::beforeの三角形のborder-width::afterの三角形より1px広く設定します。
  4. 左の境界を表示するために、::afterの三角形を::beforeの三角形の右に1px配置します。

コンテナの例となるHTMLコードは以下の通りです。

<div class="container">Border with top triangle</div>

対応するCSSコードは以下の通りです。

.container {
  position: relative;
  background: #ffffff;
  padding: 15px;
  border: 1px solid #dddddd;
  margin-top: 20px;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
}

.container::before {
  border-bottom-color: #dddddd;
}

.container::after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
}

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます!上部に三角形を持つ境界の実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習できます。