热搜：前端 vuedraggable 插件 vue

用css怎么做形状(用css怎么做形状模型)

lxf2023-02-16 15:35:57

用css怎么做形状(用css怎么做形状模型)

CSS可以产生各种形状。正方形和矩形很容易，因为它们是正方形和矩形，因为它们是正方形。 web 自然形状。添加宽度和高度以获得所需的精确矩形。添加框架半径，您可以将这个形状变成圆形，并且有足够的框架半径，您可以将这些矩形变成圆形和椭圆形。

推荐教程：CSS视频教程：CSS视频教程

我们也可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两种形状的可能性。通过巧妙地运用定位、转换和许多其他技能，我们只能使用一个 HTML 元素在 CSS 许多形状都是在中创造的。

虽然我们现在大多使用字体图标或svg图片，但我们似乎使用字体图标或svg图片 CSS 制作图标意义不大，但如何实现这些图标所使用的一些技巧和想法值得我们学习。

1.正方形

用css怎么做形状(用css怎么做形状模型)

#square {
  width: 100px;
  height: 100px;
  background: red;
}

2.长方形

用css怎么做形状(用css怎么做形状模型)

#rectangle {
  width: 200px;
  height: 100px;
  background: red;
}

3.圆形

用css怎么做形状(用css怎么做形状模型)

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

4.椭圆形

用css怎么做形状(用css怎么做形状模型)

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

5.上三角

用css怎么做形状(用css怎么做形状模型)

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

6.下三角

用css怎么做形状(用css怎么做形状模型)

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

7.左三角

用css怎么做形状(用css怎么做形状模型)

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

8.右三角

用css怎么做形状(用css怎么做形状模型)

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

9.左上角

用css怎么做形状(用css怎么做形状模型)

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

10.右上角

用css怎么做形状(用css怎么做形状模型)

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

11.左下角

用css怎么做形状(用css怎么做形状模型)

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

12.右下角

用css怎么做形状(用css怎么做形状模型)

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

13.箭头

用css怎么做形状(用css怎么做形状模型)

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
}
#curvedarrow:after {
  content:

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题