create a more complex shape using css and html - zilongxuan001/LearnFreecode GitHub Wiki
这次只用CSS创造一个心形。
首先，你需要理解伪元素::before和::after。这些伪元素被用于被选择元素的前边或后边添加事物。
接下来的例子，::before伪元素被用于通过classheart调整元素的角度。
.heart::before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -70px;
left: 5px;
}
::before和::after伪元素必须要有content属性。这个属性通常用于添加图片或文字到被选择的元素。
当::before和::after伪元素被用于改变形状，content属性仍然必须有，但是可以设置为空字符串。
在上面的例子，classheart的元素有了一个::before伪元素，可以产生一个黄色的角度，height为50px，width为70px。
这个角度的圆角使用border-radius,值为25%；位置为绝对的，离左边50px，离上边50px。
把这个屏幕上的元素变成心形。在heart::after选择器里，改变background-color为粉色，border-radius为50%。
然后，使用classheart定位元素，填充tansform属性。使用rotate()功能调整为-45度。（rotate()作用和skewX()、skewY()一样。）
最后，在heart::before选择器，设置content属性为空字符串。
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content:"" ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>
Applied Visual Design: Create a More Complex Shape Using CSS and HTML | Learn freeCodeCamp
2018-11-1 09:08:56