怎么写个心形的样式。一开始思路是半圆加直线可以搞定,查了一下一个div就可以搞定。思路要换换了。做什么要先想清楚再做。现在说一下思路。
1.用一个大的div就可以搞定。
2.直接上代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画画</title> <style> #xing{ width: 100px; height: 80px; position: relative; } #xing:before{ content: ""; width: 50px; height: 80px; display: block; position: absolute; left: 50%; background: #FF0000; border-radius: 25px 25px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #xing:after{ content: ""; width: 50px; height: 80px; display: block; background: red; transform: rotate(45deg); border-radius: 25px 25px 0 0; transform-origin: 100% 100%; } </style> </head> <body> <!-- 描述:1.1、、心形 --> <div id="xing"> </div> </body> </html>
最后呈现的样式是这样的: