css實現圓角三角形例子(無圖片)
以前我們做圓角時都會要用到圖片來實現，今天我給大家整理的這款css圓角效果是不需要圖片的純css實現的哦，下面我們一起來看看吧。
效果如下圖所示
三角形所對方向"width: 0"，
反向為三角形高度(20)"border-width: 20px"，
反向顏色為三角形顏色"border-color: #eee"，
其它兩個方向相加為三角形寬度(30)"border-width: 15px"
CSS:
| 代碼如下 |
復制代碼 |
| span {
position: absolute;
width: 0;
height: 0;
border-width: 0 15px 20px 15px;
border-style: solid;
border-color: transparent transparent #eee transparent;
top: -20px;
left: 50%;
margin-left: -15px;
} |
例子
| 代碼如下 |
復制代碼 |
| <!DOCTYPE html>
<html>www.111cn.net
<head>
<title>隨心所欲的三角形</title>
<style>
div {
width: 200px;
height: 60px;
background-color: #eee;
position: absolute;
left: 50%;
margin-left: -150px;
margin-top: -50px;
top: 50%;
border-radius: 10px;
float: left;
font: 12px/20px "微軟雅黑";
color: #000;
padding: 20px 50px;
}
span {
position: absolute;
top: -20px;
width: 0;
height: 0;
border-width: 0 15px 20px 15px;
border-style: solid;
border-color: transparent transparent #eee transparent;
left: 50%;
margin-left: -15px;
} www.111cn.net
</style>
</head>
<body>
<div>
<span></span>
三角形所對方向"width: 0"，反對的方向為三角形高度顏色為三角形顏色，其它兩個方向相加為寬度
</div>
</body>
</html> |
