今天,我们利用CSS实现五角星形状。具体代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS基本形状——五角星</title> <style type="text/css"> * { margin:40px; padding:0px; } .star { width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 50px solid red; position: relative; } .star::before { content: ""; width: 0; height: 0em; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 50px solid red; transform: rotate(72deg); position: absolute; left: -80px; top: -50px; } .star::after { content: ""; width: 0; height: 0em; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 50px solid red; transform: rotate(-73deg); position: absolute; left: -80px; top: -50px; }</style></head><body> <div class="star"></div></body></html>
实现效果为: