上部に三角形を持つコンテンツコンテナを作成する

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

上部に三角形を持つ境界

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

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

::beforeと::afterの疑似要素を使って 2 つの三角形を作成します。
三角形のborder-colorとbackground-colorをコンテナと一致させます。
境界として機能するため、::beforeの三角形のborder-widthを::afterの三角形より1px広く設定します。
左の境界を表示するために、::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 でさらに多くの実験を練習できます。