ホームページ > 記事 > ウェブフロントエンド > 純粋なCSSで描かれた三角形の矢印パターン
純粋なCSSで描かれた三角形の矢印パターン
- 巴扎黑オリジナル
- 2016-11-25 14:19:021757ブラウズ
div#up {
width: 0px;
高さ: 0px;
border-left: 5 ピクセルの実線透明。
border-right: 5 ピクセルの実線透明。
border-bottom: 5px ソリッド#2f2f2f;
}
div#down {
width: 0px;
高さ: 0px;
border-left: 20 ピクセルの単色透明。
border-right: 20px ソリッド透明;
border-top: 20px ソリッド #f00;
}
div#left {
width: 0px;
高さ: 0px;
border-top: 10 ピクセルの単色透明。
border-bottom: 10 ピクセルの単色透明。
border-right: 10px ソリッドイエロー;
}
div#right {
width: 0px;
高さ: 0px;
border-top: 60 ピクセルのソリッド透明。
border-bottom: 60 ピクセルのソリッド透明。
border-left: 60 ピクセルの緑の実線。
}
html:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。