Heim > Artikel > Web-Frontend > Ein mit CSS implementierter Ribbon-Effektcode

Ein mit CSS implementierter Ribbon-Effektcode

零下一度Original: 2017-04-25 15:09:251949Durchsuche

Als ich CSS lernte, habe ich einen CSS-Ribbon-Effekt geschrieben und er fühlte sich ziemlich gut an. Ich werde ihn unten vorstellen. Finden wir es heraus

<!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. [Bild] Capture.JPG

Das obige ist der detaillierte Inhalt vonEin mit CSS implementierter Ribbon-Effektcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fehler in CSS, die Sie kennen müssen und wie Sie sie beheben könnenNächster Artikel：Fehler in CSS, die Sie kennen müssen und wie Sie sie beheben können

In Verbindung stehende Artikel

Mehr sehen