工作中经常会用到箭头，加号，三角形等，直接让ui给出设计图icon当然可以，但是牵扯到对齐等操作，对图片的操作显然没有对div（小程序view）来的方便，所以我就在网上找了一些方法，个人仅做整理，并非原创，让我们开始！
箭头＜＞∧∨
// html
<div class="arrow right"></div>
<div class="arrow left"></div>
<div class="arrow on"></div>
<div class="arrow under"></div>
// css
.arrow {
width:20px;
height:20px;
border-top:2px solid #000;
border-right:2px solid #000;
}
.right {transform:rotate(45deg)}
.left {transform:rotate(-135deg)}
.on {transform:rotate(-45deg)}
.under {transform:rotate(135deg)}
删除×
// html
<div class="x"></div>
// css
.x {
width:50px;
height:50px;
position: relative;
background-color: rgba(169, 169, 169, .2);
border-radius: 50%;
}
.x::before,.x::after{
content: "";
position: absolute; /*方便进行定位*/
background-color: #888;
height: 30px;
width: 2px;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -1px;
}
.x::before{transform: rotate(45deg); /*进行旋转*/}
.x::after{transform: rotate(-45deg);}
三角形▲▼▶◀
// html
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
// css
div {
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
box-sizing: border-box;
margin-top: 20px;
}
.red {border-color: red transparent transparent transparent;}
.blue {border-color: transparent blue transparent transparent;}
.green {border-color: transparent transparent green transparent;}
.yellow {border-color: transparent transparent transparent yellow;}
加号+
// html
<div class="add"></div>
// css
.add {
border: 1px solid;
width: 100px;
height: 100px;
color: #ccc;
transition: color .25s;
position: relative;
}
.add::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 80px;
margin-left: -40px;
margin-top: -5px;
border-top: 10px solid;
}
.add::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 80px;
margin-left: -5px;
margin-top: -40px;
border-left: 10px solid;
}
.add:hover {
color: blue;
}
// 附原文网址：https://blog.csdn.net/Helloyongwei/article/details/83242871 如有侵权请告知删除
爱心 ❤️
// html
<div class="heart"></div>
// css
.heart {
width: 185px;
height: 300px;
margin: 100px auto;
position: relative;
}
.heart::before,
.heart::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: #f00;
transform: rotate(45deg);
border-radius: 100px 100px 0 0;
}
.heart::after {
transform: rotate(-45deg);
left: -80px;
}
气泡对话框
// html
<div class="bubbly"></div>
// css
.bubbly {
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
background: #00aabb;
border-radius: .4em;
width: 260px;
padding: 60px 20px;
text-align: center;
color: white;
font-size: 200%;
}
.bubbly:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
border: 34px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-left: 0;
margin: 0 0 -34px -17px;
}
折角效果
// html
<div class="corner">
<h1>pie</h1>
</div>
// css
.corner{
position: absolute;
top:50%;left: 50%;
transform:translate(-50%,-50%);
width: 120px;line-height:120px;
padding:40px;
text-align: center;
color: white;
font-size: 200%;
background:linear-gradient(-150deg,transparent 1.5em, yellowgreen 0);
border-radius:.5em;
}
.corner:before{
content: '';
position: absolute;
top: 0; right: 0;
background:
linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
width: 1.73em; height: 3em;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}
五角星☆
// html
<div class="five-star"></div>
// css
.five-star{
position: absolute;
top: 35%;
right: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
display: block;
border-left: 3.04px solid transparent;
border-right: 3.24px solid transparent;
border-bottom: 10px solid #98DBE3;
-webkit-filter: drop-shadow(1px .5px 1px #ccc);
cursor: pointer;
transform:scale(8);
}
.five-star:before{
content: "";
position: absolute;
top: 8.65px;
left: -8.82px;
width: 0;
height: 0;
color: #98DBE3;
display: block;
border-left: 12.5px solid transparent;
border-right: 12.5px solid transparent;
border-bottom: 9.08px solid #98DBE3;
transform-origin: top center;
transform: rotate(36deg);
}
.five-star:after{
content: "";
position: absolute;
top: 8.65px;
left: -15px;
width: 0;
height: 0;
color: #98DBE3;
display: block;
border-left: 12.5px solid transparent;
border-right: 12.5px solid transparent;
border-bottom: 9.08px solid #98DBE3;
transform-origin: top center;
transform: rotate(-36deg);
}
太极图☯️
// html
<div class="TaiChi"></div>
// css
.TaiChi{
position: absolute;
top: 50%;left: 50%;
width: 200px;height: 200px;
transform: translate(-50%, -50%);
box-shadow:0 0 2px #ddd;
border-radius:50%;
background-image:
radial-gradient(#000 12.5px, transparent 12.5px),
radial-gradient(#fff 12.5px, transparent 12.5px),
radial-gradient(#fff 50px, transparent 50px),
radial-gradient(#000 50px, transparent 50px),
linear-gradient(90deg,#000 100px, #fff 100px);
background-position:center 50px,center -50px,center 50px,center -50px,0 0;
}
菜单
// html
<div class="box"></div>
// css
.box{
width: 150px;height: 30px;
border-top: 30px solid;
border-bottom: 30px solid;
padding: 30px 0;
background-color:currentColor;
background-clip: content-box;
}
