There will be something like this, 1024 will teach you all, happy programmers day! Thanks to everyone who works hard, hard work may not succeed, but you will not feel sorry if you fail. The most difficult thing is not the beginning, but the persistence day after day.
钻石
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
border-style:solid;
border-color:transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin:20px 0 50px 0;
}
#box:after{
content:"";
position: absolute;
top:25px;
left:-25px;
width:0;
height:0;
border-style:solid;
border-color:red transparent transparent transparent;
border-width:70px 50px 0 50px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
鸡蛋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
display: block;
width:126px;
height:180px;
background-color: red;
-webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
爆炸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
background-color: red;
width: 80px;
height: 80px;
margin:40px;
position: relative;
text-align: center;
}
#box:before,#box:after{
content: "";
position: absolute;
top:0;left:0;
width: 80px;
height: 80px;
background-color: red;
}
#box:before{
transform:rotate(30deg);
}
#box:after{
transform:rotate(60deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
太极
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 96px;
height: 48px;
margin: 40px;
background-color: #eee;
border-color: red;
border-style: solid;
border-width:2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#box:before{
content:"";
position: absolute;
top:50%;
left:0;
background-color: #eee;
border:18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#box:after{
content:"";
position: absolute;
top:50%;
left:50%;
background-color: red;
border:18px solid #eee;
border-radius: 100%;
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Face boox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
background: red;
text-indent: -999em;
width: 100px;
height: 110px;
margin: 40px;
border-radius:5px;
position: relative;
overflow: hidden;
border: 15px solid red;
border-bottom: 0;
}
#box:before{
content:"/20";
position: absolute;
background-color: red;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 25px;
}
#box:after{
content:"/20";
position: absolute;
top: 50px;
width: 55px;
height: 20px;
background-color: #eee;
right: 5px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
残月
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
半圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 0;
height: 0;
border-right: 100px dotted transparent;
border-bottom: 100px dotted red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
弯尾箭头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
position: relative;
width: 0;
height: 0;
margin: 20px;
border-top: 9px solid transparent;
border-right: 9px solid red;
transform: rotate(10deg);
}
#box:after{
content:"";
position: absolute;
border:0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
transform: rotate(45deg);
}
#box:last-child{
transform: rotate(110deg);
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box"></div>
</body>
</html>
红心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
position: relative;
width: 100px;
height: 90px;
}
#box:before,#box:after{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background-color: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#box:after{
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
It's the end! The original is not easy, please indicate the source for reprinting.
The front-end learning is not done overnight. Without stepping, there is no way to reach thousands of miles. Only by continuous hard work can you and me gain something. Professional knowledge can still be learned by institutions. The establishment of training institutions is inevitable. Are you spending the money right?
Live up to every true feeling, don't laugh at everyone who is working hard, help others as much as possible, strengthen yourself every day, and wash away the lead to shine.
Recommended reading:
Little Shark
Ninjutsu! The cat's eye three-gou jade
summons the dragon's
spinning cube
to mimic the baby elephant