以前我们做圆角时都会要用到图片来实现，今天我给大家整理的这款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>
|
