Use CSS to draw common ICONS

Work often use arrows, plus signs, triangles, and so on, let the UI directly give the design icon of course, but involved in the operation of alignment and so on, the operation of the picture is obviously not to div (small program view) to the convenience, so I found some methods on the Internet, personal only do sorting, not original, let’s start!

Arrow < > ∧∨

// 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)}
Copy the code

Remove x

// 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: # 8888; height: 30px; width: 2px; top: 50%; left: 50%; margin-top: -15px; margin-left: -1px; } .x::before{transform: rotate(45deg); }. X ::after{transform: rotate(-45deg); }Copy the code

Triangle bring ▼ ▶ ◀

// 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; }Copy the code

A plus

// 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; } / / attach the original web site: https://blog.csdn.net/Helloyongwei/article/details/83242871 please let us know if there is any infringement to deleteCopy the code

Love ❤ ️

// 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;
}
Copy the code

Bubble dialog

// 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;
}
Copy the code

Effect of Angle

// 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 (1.5 em - 150 deg, transparent, 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.73 em. height: 3em; The transform: translateY (1.3 em) rotate 30 deg (-); transform-origin: bottom right; border-bottom-left-radius: inherit; Box-shadow: -.2em.2em.3em -.1em rgba(0,0,0,.15); }Copy the code

Pentagram fostered

// 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.04 px solid transparent; Border - right: 3.24 px 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.65 px; Left: 8.82 px; width: 0; height: 0; color: #98DBE3; display: block; Border - left: 12.5 px solid transparent; Border - right: 12.5 px solid transparent; Border - bottom: 9.08 px dbe3 solid # 98; transform-origin: top center; transform: rotate(36deg); } .five-star:after{ content: ""; position: absolute; Top: 8.65 px; left: -15px; width: 0; height: 0; color: #98DBE3; display: block; Border - left: 12.5 px solid transparent; Border - right: 12.5 px solid transparent; Border - bottom: 9.08 px dbe3 solid # 98; transform-origin: top center; transform: rotate(-36deg); }Copy the code

// 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 (#000 12.5px, transparent 12.5px), transparent (# 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; }Copy the code

// 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; }Copy the code