CSS 实现各种形状

Cellinlab

发布于 2023-05-17 15:55:30

4750

发布于 2023-05-17 15:55:30

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

# 原理

# border-width

三角形

<html>
  <body>
    <div id="border-triangle"></div>
  </body>
</html>

<style>
#border-triangle {
  height: 0;
  width: 0;
  border-left: 50px solid red;
  border-top: 50px solid blue;
  border-right: 50px solid green;
  border-bottom: 50px solid yellow;
}
</style>

# 实例

# 矩形

<html>
  <body>
    <div id="rectangle"></div>
  </body>
</html>

<style>
#rectangle {
  height: 50px;
  width: 100px;
  background: red;
}
</style>

# 圆形

<html>
  <body>
    <div id="circle"></div>
  </body>
</html>

<style>
#circle {
  height: 50px;
  width: 50px;
  background: red;
  border-radius: 50%;
}
</style>

# 椭圆

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

<style>
#oval {
  height: 50px;
  width: 100px;
  background: red;
  border-radius: 100px / 50px; /* 水平半径均为 100 竖直半径均为 50 */
}
</style>

# 三角形

上三角(上下左右类似)

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

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

左上角（右上角、右下角、左上角、左下角类似）

<html>
  <body>
    <div id="triangle-topleft"></div>
  </body>
</html>

<style>
#triangle-topleft {
  height: 0;
  width: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
}
</style>

# 箭头

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

<style>
#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: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}
</style>

# 梯形

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

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

# 平行四边形

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

<style>
#parallelogram {
  width: 100px;
  height: 50px;
  transform: skew(20deg);
  background: red;
}
</style>

# 星星

六角星

<html>
  <body>
    <div id="star-six"></div>
  </body>
</html>

<style>
#star-six {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid red;
  position: relative;
}
#star-six:after {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid red;
  position: absolute;
  content: "";
  top: 15px;
  left: -25px;
}
</style>

五角星

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

<style>
#star-five {
  margin: 50px 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;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  content: "";
  transform: rotate(-70deg);
}
</style>

# 五边形

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

<style>
#pentagon {
  margin: 30px;
  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;
}
</style>

# 六边形

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

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

爱心

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

<style>
#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%;
}
</style>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/2/20，如有侵权请联系 cloudcommunity@tencent.com 删除

css