CSS实现五角星

简介: CSS实现五角星

今天,我们利用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>

实现效果为:

相关文章
|
2月前
|
前端开发
CSS实现心形
CSS实现心形
32 0
|
6月前
|
前端开发
CSS 水波纹对号,错号
CSS 水波纹对号,错号
48 1
|
前端开发
CSS实现三角形
CSS实现三角形
|
11月前
|
前端开发
CSS画心形的三种方法,超级简单(二)
CSS画心形的三种方法,超级简单
|
11月前
|
前端开发
CSS画心形的三种方法,超级简单(一)
CSS画心形的三种方法,超级简单
|
6月前
|
前端开发 程序员 开发者
css实现水波纹
css实现水波纹
|
前端开发
CSS实现中间粗两头细的线条
CSS实现中间粗两头细的线条
88 1
|
前端开发
简单CSS实现图片旋转
简单CSS实现图片旋转
55 0
|
前端开发
css三角形
css三角形
56 0