はじめに
この実験では、CSSを使って上部に三角形を持つコンテンツコンテナを作成する方法を学びます。これは、多くのウェブサイトやアプリケーションで使用される一般的なデザイン要素であり、視覚的な興味を加え、階層感を与えます。この実験が終了するまでに、この効果を作成して独自のプロジェクトに適用するスキルを身につけるでしょう。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSSを使って上部に三角形を持つコンテンツコンテナを作成する方法を学びます。これは、多くのウェブサイトやアプリケーションで使用される一般的なデザイン要素であり、視覚的な興味を加え、階層感を与えます。この実験が終了するまでに、この効果を作成して独自のプロジェクトに適用するスキルを身につけるでしょう。
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でさらに多くの実験を練習できます。