您的位置：首页 > Web前端 > CSS

css实现小三角形

2017-08-01 10:51 70 查看

第一种：不带边框的三角形：

通过空的di设置宽高为0，之后通过用border的宽度控制三角形的形状

第二种：带边框的三角形：

通过两个大小一样、颜色不一样、放置的位置不一样的两个三角形进行叠加

第三种：任何形状

通过border-radish进行控制：border-radish:100% 0 100% 0;

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#content{
width:250px;
height:100px;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0px 0px 10px #999; /*水平阴影的位置、垂直阴影的位置、模糊距离、颜色*/
text-indent: 2em; /*首行文本的缩进2个文字的高度*/
font-size:12px;
line-height:1.5;
margin:200px auto;
padding:10px;
position:relative;

}

span{
width:0px;
height:0px;
position:absolute;
left:15px;

}

span.out{
border-width:15px;
border-color:transparent transparent #ccc transparent; /*上、右、下、左*/
border-style:solid;
top:-40px;

}

span.iner{
border-width:15px;
border-color:transparent transparent #fff transparent; /*上、右、下、左*/
border-style:solid;
top:-38px;

}

/*其他形状*/

span.right{
width:16px;
height:16px;
background:#fff;
border-width:1px;
border-style:solid;
border-color:transparent #ccc transparent transparent;
border-radius:100% 0 100% 0;
/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/
box-shadow:5px 0px 10px #999;
top:20px;
left:255px;

}

.triangle-all{
width:0;
height:0;
border-top:20px solid #FCC;
border-left:20px solid #9C6;
border-right:20px solid #C9F;
border-bottom:20px solid #99F;
float:left;
margin-left:100px;

}

.triangle-up{
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid #99F;
float:left;
margin-left:140px;

}

.triangle-down{
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #FCC;
float:left;
margin-left:180px;

}

.triangle-left{
width:0;
height:0;
border-right:20px solid #C9F;
border-bottom:20px solid transparent;
border-top:20px solid transparent;
float:left;
margin-left:220px;

}

.triangle-right{
width:0;
height:0;
border-left:20px solid #9C6;
border-bottom:20px solid transparent;
border-top:20px solid transparent;
float:left;
margin-left:260px;

}

.triangle-left-bottom{
width:0;
height:0;
border-top:20px solid transparent;
border-left:20px solid #9C6;
float:left;
margin-left:300px;

}

</style>

</head>

<body>



<div id="content">

<span><span class="out"></span><span class="iner"></span><span class="right"></span></span>

<p>不管写什么内容，总之就是要实现无图小三角，要是有背景颜色那倒是极好的，没有的话也可以，就是稍微麻烦一点</p>

</div>





<div class="triangle-all"></div>



<div class="triangle-up"></div>



<div class="triangle-down"></div>



<div class="triangle-left"></div>



<div class="triangle-right"></div>



<div class="triangle-left-bottom"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css border

相关文章推荐

新的分享

章节导航