css实现圆角三角形例子(无图片)
以前我们做圆角时都会要用到图片来实现，今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦，下面我们一起来看看吧。
效果如下图所示
三角形所对方向" 0"，
反向为三角形高度(20)"border- 20px"，
反向颜色为三角形颜色"border-color: #eee"，
其它两个方向相加为三角形宽度(30)"border- 15px"
CSS:
|
代码如下
|
复制代码
|
|
span
{
position: absolute;
0;
height: 0;
border- 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 {
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;
0;
height: 0;
border- 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>
三角形所对方向"
0"，反对的方向为三角形高度颜色为三角形颜色，其它两个方向相加为宽度
</div>
</body>
</html>
|