前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯css3 实现的标签效果</title>
<style>
body{
font-family: "微软雅黑";
font-size: 14px;
padding: 25px;
}
/*三角的实现*/
.sanjiao-box{
margin-top: 100px;
overflow: hidden;
}
.sanjiao{
float: left;
width:0;
height:0;
border: 100px solid transparent;
}
/*边框*/
.sanjiao-a{
border-top-color: #ff0;
border-right-color: #f0f;
border-bottom-color: #00f;
border-left-color: #000;
}
/*上三角*/
.sanjiao-t{
border-bottom-color: #00f;
}
/*右三角*/
.sanjiao-r{
border-left-color: #000;
}
/*下三角*/
.sanjiao-b{
border-top-color: #ff0;
}
/*左三角*/
.sanjiao-l{
border-right-color: #f0f;
}
/*圆圈*/
.yuan{
width:0;
height:0;
margin-top: 20px;
border:100px solid #f00;
border-radius: 50%;
box-shadow:0 0 0 10px rgba(0,0,0,.5);/*阴影*/
}
</style>
</head>
<body>
<!--css使用边框实现三角-->
<div>
<div class="sanjiao sanjiao-a"></div>
<div class="sanjiao sanjiao-t"></div>
<div class="sanjiao sanjiao-r"></div>
<div class="sanjiao sanjiao-b"></div>
<div class="sanjiao sanjiao-l"></div>
</div>
<!--css使用边框实现圆-->
<div></div>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » css 实现三角形，圆形