如何使用CSS实现小三角形效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:23
Original
1451 Leute haben es durchsucht

如何使用CSS实现小三角形效果:
在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小三角头效果的方式。代码如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>三种纯CSS实现三角形的方法</title><style type="text/css">.message-box {  position:relative;  float:left;  margin:80px 0 0 100px;  width:240px;  height:60px;  line-height:60px;  border:1px solid #000;  text-align:center;  color:#0C7823;}.triangle-border {  position:absolute;  left:100px;  overflow:hidden;  width:0;  height:0;  border-width:10px;  border-style:none dashed solid dashed;}.tb-border {  top:-10px;  border-color:#000 transparent #000 transparent;}.tb-background {  top:-9px;  border-color:transparent transparent #fff transparent;}/*字符*/.triangle-character {  position:absolute;  left:100px;  overflow:hidden;  width:26px;  height:26px;  font:normal 26px "宋体";}.tc-background {  top:-12px;  color:#FFF;}.tc-border {  top:-13px;  color:#000;}</style></head><body><div class="message-box"> <span> border 属性实现</span>  <div class="triangle-border tb-border"></div>  <div class="triangle-border tb-background"></div></div><div class="message-box"> <span> ◆ 字符实现</span>  <div class="triangle-character tc-border">◆</div>  <div class="triangle-character tc-background">◆</div></div></body></html>
Nach dem Login kopieren

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/505.html

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!