具体看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #circle { /* 50px; */ /* height: 50px; */ width: 0; height: 0; border-style: solid; border-width: 0 25px 50px 25px; border-color: transparent transparent #ff00cc transparent; } .test { width: 0px; height: 0px; border-width: 30px; border-style: solid; /* border-color: red blue lightpink green; */ border-color: transparent transparent red transparent; /* background-color: lightgray */ } .box { width: 500px; } .top { border-bottom: 3px solid #cc0000; border-top-color: #cc0000; border-left: 3px dotted transparent; border-right: 3px dotted transparent; } .center { padding: 10px 20px; color: white; font-size: 14px; background: #cc0000; } .bot { border-top: 3px solid #cc0000; border-bottom-color: #cc0000; border-left: 3px dotted transparent; border-right: 3px dotted transparent; } </style> </head> <body> <div id="circle"> </div> <br> <div class="test"> </div> <br> <div class="box"> <div class="top"></div> <div class="center">粉短剑腮红您囧来款看俩次</div> <div class="bot"></div> </div> </body> </html>
来自:http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/