上部に三角形を持つ境界

はじめに

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

Skills Graph

上部に三角形を持つ境界

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

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

1. ::beforeと::afterの疑似要素を使って2つの三角形を作成します。
2. 三角形のborder-colorとbackground-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でさらに多くの実験を練習できます。