【HTML】CSS奇思妙想之利用伪元素实现常见图形：三角形、多边形、红心、箭头、会话泡泡等

admin

2024年3月29日 23:31 本文热度 590

CSS是一种用于描述HTML或XML（包括如SVG，MathML等衍生语言）文档样式的样式表语言，它不仅仅可以用于控制网页的布局和颜色，还能够对网页中元素位置的排版进行像素级精确控制，能够生成各种形状，不管在日常的开发还是学习中，对我们都有帮助。

01

椭圆

和圆形类似，如果元素的宽度和高度不同，那么border-radius: 50%就会创建一个椭圆形。

<div id="oval"></div>

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

02

上、下、左、右三角形

利用边框的特性，可以创建一个三角形，可以通过调整边框的大小和颜色来创建不同方向和颜色的三角形。

<div id="triangle-up"></div>

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-down"></div>

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

<div id="triangle-left"></div>

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

<div id="triangle-right"></div>

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

03

左上、右上、左下、右下角

<div id="triangle-lefttop"></div>
<div id="triangle-righttop"></div>
<div id="triangle-leftbottom"></div>
<div id="triangle-rightbottom"></div>

/* 左上角 */
#triangle-lefttop {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}
/* 右上角 */
#triangle-righttop {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}
/* 左下角 */
#triangle-leftbottom {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}
/* 右下角 */
#triangle-rightbottom {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

04

箭头

<div id="curvedarrow"></div>

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -14px;
  left: -9px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
}

05

梯形

<div id="trapezoid"></div>

#trapezoid {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

06

平行四边形

<div id="parallelogram"></div>

#parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: red;
}

07

五角星

<div id="star-five"></div>

#star-five {
  margin: 100px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  content: '';
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
}

08

五边形

<div id="pentagon"></div>

#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
}
#pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}

09

六边形

<div id="hexagon"></div>

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 30px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid red;
}

11

八边形

<div id="octagon"></div>

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;    
}

#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid red;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    width: 42px;
    height: 0;    
}

#octagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid red;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    width: 42px;
    height: 0;    
}

12

爱心

<div id="heart"></div>

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

13

对话泡泡

<div id="talkbubble"></div>

#talkbubble {
  width: 120px;
  height: 80px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}

14

太极

<div id="taiji"></div>

#taiji {
  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#taiji:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  box-sizing: content-box;
}
#taiji:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  box-sizing: content-box;
}

15

12花瓣

<div id="flower-12"></div>

#flower-12 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
}
#flower-12:before,
#flower-12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
#flower-12:before {
  transform: rotate(30deg);
}
#flower-12:after {
  transform: rotate(60deg);
}

16

8花瓣

<div id="flower-8"></div>

#flower-8 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
}
#flower-8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
  transform: rotate(135deg);
}

17

徽章丝带

<div id="badge-ribbon"></div>

#badge-ribbon {
  position: relative;
  background: red;
  height: 100px;
  width: 100px;
  border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  transform: rotate(-140deg);
}
#badge-ribbon:after {
  left: auto;
  right: -10px;
  transform: rotate(140deg);
}

18

徽章丝带

<div id="lock"></div>

#lock {
  font-size: 8px;
  position: relative;
  width: 180px;
  height: 130px;
  border-radius: 20px;
  top: 100px;
  box-sizing: border-box;
  border: 35px solid red;
  border-right-width: 75px;
  border-left-width: 75px;
  margin: 0 0 60px 0;
}
#lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 25px solid red;
  width: 140px;
  height: 120px;
  left: 50%;
  margin-left: -70px;
  top: -120px;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
}
#lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 10px solid red;
  width: 50px;
  height: 80px;
  border-radius: 25px;
  left: 50%;
  top: -10px;
  margin-left: -25px;
}

19

指示器

<div id="pointer"></div>

#pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: red;
}
#pointer:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

20

月亮

<div id="moon"></div>

#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

该文章在 2024/3/29 23:31:23 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。