设为首页 - 加入收藏 知识爱读网_惠州站长网 (http://www.0752zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 如何 企业 用户 中国
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

45个值得收藏的CSS形状

发布时间:2019-04-23 23:37 所属栏目:[优化] 来源:前端小智
导读:CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。 我们还可以使用 CSS 伪元素

?45个值得收藏的CSS形状

CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。

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

虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。

1.正方形

  1. #square?{??
  2. width:?100px;??
  3. height:?100px;??
  4. background:?red;??
  5. }??

2.长方形

  1. #rectangle?{??
  2. width:?200px;??
  3. height:?100px;??
  4. background:?red;??
  5. }??

3.圆形

  1. #circle?{??
  2. width:?100px;??
  3. height:?100px;??
  4. background:?red;??
  5. border-radius:?50%??
  6. }??

4.椭圆形

  1. #oval?{??
  2. width:?200px;??
  3. height:?100px;??
  4. background:?red;??
  5. border-radius:?100px?/?50px;??
  6. }??

5.上三角

  1. #triangle-up?{??
  2. width:?0;??
  3. height:?0;??
  4. border-left:?50px?solid?transparent;??
  5. border-right:?50px?solid?transparent;??
  6. border-bottom:?100px?solid?red;??
  7. }??

6.下三角

  1. #triangle-down?{??
  2. width:?0;??
  3. height:?0;??
  4. border-left:?50px?solid?transparent;??
  5. border-right:?50px?solid?transparent;??
  6. border-top:?100px?solid?red;??
  7. }??

7.左三角

  1. #triangle-left?{??
  2. width:?0;??
  3. height:?0;??
  4. border-top:?50px?solid?transparent;??
  5. border-right:?100px?solid?red;??
  6. border-bottom:?50px?solid?transparent;??
  7. }??

8.右三角

  1. #triangle-right?{??
  2. width:?0;??
  3. height:?0;??
  4. border-top:?50px?solid?transparent;??
  5. border-left:?100px?solid?red;??
  6. border-bottom:?50px?solid?transparent;??
  7. }??

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章