css实现小三角形

最新推荐文章于 2024-06-19 14:48:22 发布

菜小白的成长史

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量605

点赞数

分类专栏： css 文章标签： css border

本文链接：https://blog.csdn.net/zym_zb/article/details/76511578

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

通过空的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>