ホームページ > 記事 > ウェブフロントエンド > CSSでのトライアングル実装の簡単な例を詳しく解説
CSSでのトライアングル実装の簡単な例を詳しく解説
- 高洛峰オリジナル
- 2017-03-07 14:49:281644ブラウズ
多くのページ制作では、三角形が強調表示されるようにデザインされます。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.corner-top{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:solid dashed dashed dashed;
border-color:#e66161 transparent transparent transparent;
}
.corner-bottom{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed dashed solid dashed;
border-color:transparent transparent #94e24f transparent;
}
.corner-left{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent transparent #85bfda;
}
.corner-right{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed solid dashed dashed;
border-color:transparent #f3bb5b transparent transparent;
}
</style>
</head>
<body>
<p class="corner-top"></p>
</br>
<p class="corner-bottom"> </p>
</br>
<p class="corner-left"> </p>
</br>
<p class="corner-right"> </p>
</body>
</html>
主な注意点:
1. 0; 目的は IE との互換性です。そうでない場合、IE は台形に表示されます。または line-height:0; も機能します
2 拡張可能な行を改善するために、境界線の色を透明に設定します。 IE では灰色になります。互換性の方法は、対応する境界線スタイルを設定することです
3. プロジェクトでは、通常、三角形を対応する位置に配置するために絶対配置を使用することを選択します。逆三角形。その結果、コンテナ内に複数の高さが存在します。メソッドは、コンテナの高さを設定してから、overflow: hidden; (三角形の設計原理を知ることができます)
純粋に三角形を実装する上記の単純な例です。 CSS はすべてエディターが共有した内容ですので、皆さんの参考になれば幸いです。また、皆さんも PHP 中国語をサポートしていただければ幸いです。
CSS を使用して三角形を実装する簡単な例の詳細については、PHP 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。