用css设计宽箭头
2018-01-30 本文已影响0人
请叫我小胖纸_7ad5
<!DOCTYPE html>
<html lang="en" class="muui-theme-webapp-main">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>学信教育</title>
<style>
*{
padding: 0;
margin: 0;
}
*{
padding: 0;
margin: 0;
}
/* 箭头形状 */
.wrap,.circles{
width: 100%;
height: 300px;
margin-top: 20px;
}
.sp{
width: 250px;
height: 250px;
position: relative;
float: left;
}
.sp>span{
float: left;
}
.span1 {
width: 0;
height: 0;
border-top: 35px solid transparent;
border-left: 50px solid #fff;
border-bottom: 35px solid transparent;
position: absolute;
}
.span3{
display: block;
width: 200px;
height: 70px;
background: yellowgreen;
}
.span2{
width: 0;
height: 0;
border-top: 35px solid transparent;
border-left: 50px solid yellowgreen;
border-bottom: 35px solid transparent;
}
/* 三角向上 */
.sheji1{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: absolute;
top: 15%;
}
/* 三角向下 */
.sheji2{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
top: 15%;
left: 10%;
}
/* 三角向左 */
.sheji3{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
position: absolute;
top: 15%;
left: 20%;
}
/* 三角向右 */
.sheji4{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
position: absolute;
top: 15%;
left: 30%;
}
/* 叶子形状 */
.circles{
margin-top: 30px;
}
.circles ul li {
display: inline-block;
font-size: 18px;
font-weight: 400;
text-align: center;
line-height: 18px;
color: #ffffff;
width: 110px;
height: 100px;
padding: 25px;
-webkit-border-radius: 50% 50% 5% 50%;
-moz-border-radius: 50% 50% 5% 50%;
border-radius: 50% 50% 5% 50%;
background: #3CC4C9;
vertical-align: middle;
position: relative;
}
.circles ul li.promo1 {
z-index: 1;
}
.circles ul.circle-box li {
margin-left: -30px;
}
.bubble {
display: table;
width: 98%;
height: 98%;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.circles ul li.promo2 {
background:#DFD400;
z-index: 2;
}
.circles ul li.promo3 {
background:#F06D68;
z-index: 3;
}
.circles ul li.promo4 {
background:#366972;
z-index: 4;
}
.circles ul li.promo5 {
background:#e98bd9;
z-index: 5;
}
.circles ul li.promo6 {
background:#2298cf;
z-index: 6;
}
.circles ul li.promo7 {
background:#cc60be;
z-index: 7;
}
.circles ul li.promo8 {
background:#82dde4;
z-index: 8;
}
.circles ul li.promo9 {
background:#dd3434;
z-index: 9;
}
.circles ul li.promo10 {
background:#d8a22f;
z-index: 10;
}
</style>
</head>
<body>
<!-- 宽箭头向右方向 -->
<div class="wrap">
<div class="sp">
<span class="span1"></span><span class="span3"></span><span class="span2"></span>
</div>
<div class="sp">
<span class="span1"></span><span class="span3"></span><span class="span2"></span>
</div>
<div class="sp">
<span class="span1"></span><span class="span3"></span><span class="span2"></span>
</div>
<div class="sp">
<span class="span1"></span><span class="span3"></span><span class="span2"></span>
</div>
<div class="sp">
<span class="span1"></span><span class="span3"></span><span class="span2"></span>
</div>
<div class="sp">
<span class="span1"></span><span class="span3"></span><span class="span2"></span>
</div>
<div class="sp">
<span class="span1"></span><span class="span3"></span><span class="span2"></span>
</div>
<!-- 三角向上 -->
<div class="sheji1"></div>
<!-- 三角向下 -->
<div class="sheji2"></div>
<!-- 三角向左 -->
<div class="sheji3"></div>
<!-- 三角向右 -->
<div class="sheji4"></div>
</div>
<div class="circles">
<ul class="circle-box"><li class="promo1">
<div class="bubble"><p>11111</p></div></li>
<li class="promo2"><div class="bubble"><p>22222</p></div></li>
<li class="promo3"><div class="bubble"><p>33333</p></div></li>
<li class="promo4"><div class="bubble"><p>44444</p></div></li>
<li class="promo5"><div class="bubble"><p>55555</p></div></li>
<li class="promo6"><div class="bubble"><p>66666</p></div></li>
<li class="promo7"><div class="bubble"><p>77777</p></div></li>
<li class="promo8"><div class="bubble"><p>88888</p></div></li>
<li class="promo9"><div class="bubble"><p>99999</p></div></li>
<li class="promo10"><div class="bubble"><p>00000</p></div></li>
</ul>
</div>
</body>
</html>
可能对于大神来说，这样的设计箭头不用费脑子的事，可就是偏偏我用了将近三四个小时才研究出来，不得不说我算是脑子笨的一类人，还在我还是很顽强的，愿意花时间研究这一类东西，我想我会继续学习，如果以后有什么需要更改的我会继续更改，完善这一篇的形状设计，如果各位朋友有更好的代码，希望可以多多认识认识，互相学习，共同进步。
