ホームページ > 記事 > ウェブフロントエンド > CSSで実装したリボンエフェクトコード
CSSで実装したリボンエフェクトコード
- 零下一度オリジナル
- 2017-04-25 15:09:251966ブラウズ
CSS を学習していたときに、CSS リボン効果を作成しました。以下にエディターが説明します。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.ribbon-content {
border: 1px solid #DDD;
font-weight: bold;
margin: 0 -10px;
min-height: 30px;
padding: 7px 31px;
text-align: center;
line-height: 30px;
}
.ribbon-left {
display: block;
border-left: 10px solid white;
border-top: 8px solid #EEE;
float: left;
height: 0;
margin-left: -10px;
width: 0;
}
.ribbon-right {
display: block;
border-right: 10px solid white;
border-top: 8px solid #EEE;
float: right;
height: 0;
margin-right: -10px;
width: 0;
}
</style>
</head>
<body>
<p style="margin: 0 auto; width: 200px;">
<p class="ribbon" style="background: whiteSmoke;">
<p class="ribbon-content" style="background: whiteSmoke;">标题</p>
<p class="ribbon-left"></p>
<p class="ribbon-right"></p>
</p>
<p style="background: whiteSmoke;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</p>
</body>
</html>2. [写真]キャプチャ.JPG
以上がCSSで実装したリボンエフェクトコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：知っておくべきCSSのバグとその修正方法次の記事：知っておくべきCSSのバグとその修正方法