css绘制常见的几何图形

  前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌。一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结。

  这次我主要总结一下用Css绘制各种形状的技巧,同时要结合before、after伪元素和定位做出一些效果。

  Triangle Up(向上的三角形)

1 #triangle-up{
2    width: 0;
3     height:0;
4     border-left:50px solid transparent;
5     border-right: 50px solid transparent;
6     border-bottom: 70px solid #81cfa2;
7  }

  Triangle Down(向下的三角形)

1 #triangle-down {
2      width: 0;
3      height: 0;
4      border-left: 50px solid transparent;
5      border-right: 50px solid transparent;
6      border-top: 70px solid #81cfa2;
7  }

  Triangle Left(向左的三角形)

#triangle-left{
       width: 0;
       height:0;
       border-right: 70px solid #81cfa2;
       border-top: 50px solid transparent;
       border-bottom:50px solid transparent;
}

  Triangle TopRight(向右上的三角形)

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

  三角形实现比较简单,同理可以得到一些其他的三角形,绘制三角形主要是另宽高都为0,然后利用transparent设置其他部分透明。

但是要学会在自己的项目中结合before和after伪元素以及定位做出一些组合效果,比如我正在做的Oppo社区的一个项目(我的这个做Gif的软件有些问题)

  这里我贴上导航栏处绘制三角形的代码

 1 .search:before {
 2     border-bottom-color: #000 !important;
 3     top: -11px;
 4 }
 5 .search:after, .search:before {
 6     width: 0;
 7     height: 0;
 8     content: '';
 9     border-style: dashed dashed solid;
10     border-color: transparent transparent #fff;
11     border-width: 0 10px 10px;
12     overflow: hidden;
13     position: absolute;
14     top: -10px;
15     right: 10px;
16 }

okaychen

但是值得注意的一点事IE6不支持transparent属性,但是我们可以通过设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题。

   接下来,我在总结几个常用的Css绘制的形状(结合before和after伪元素):

       Talk Bubble(聊天框)

 1 #talkBubble{
 2     width: 120px;
 3     height: 80px;
 4     background: #81cfa2;
 5     position: relative;
 6     border-radius: 10px;
 7     -webkit-border-radius: 10px;
 8     -moz-border-radius: 10px;
 9 }
10 #talkBubble:before{
11     content: "";
12     position: absolute;
13     right: 100%;
14     top: 26px;
15     width: 0;
16     height: 0;
17     border-top: 13px solid transparent;
18     border-right: 26px solid #81cfa2;
19     border-bottom: 13px solid transparent;
20 }

   Heart(心形)

 1 #Heart {
 2         position: relative;
 3         width: 100%;
 4         height: 90px;
 5     }
 6     
 7     #Heart:before,
 8     #Heart:after {
 9         content: "";
10         position: absolute;
11         left: 50px;
12         top: 0;
13         width: 50px;
14         height: 80px;
15         background: #FE4C40;
16         -moz-border-radius: 50px 50px 0 0;
17         border-radius: 50px 50px 0 0;
18         -webkit-transform: rotate(-45deg);
19         -moz-transform: rotate(-45deg);
20         transform: rotate(-45deg);
21         -webkit-transform-origin: 0 100%;
22         -moz-transform-origin: 0 100%;
23         transform-origin: 0 100%;
24     }
25     
26     #Heart:after {
27         left: 0;
28         -webkit-transform: rotate(45deg);
29         -moz-transform: rotate(45deg);
30         transform: rotate(45deg);
31         -webkit-transform-origin: 100% 100%;
32         -moz-transform-origin: 100% 100%;
33         transform-origin: 100% 100%;
34     }

css可以绘制很多你想不到形状,熟练掌握一些常用的css绘制图形的技巧可以让你在项目中游刃有余。

下一阶段我把重点仍然放在node的学习,不急不躁:希望这个暑假我有能力总结出一篇node的博客,而不是只有在makedown上的一大片笔记。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang泛型编程初体验

序言 众所周知,Golang中不支持类似C++/Java中的标记式泛型,所以对于常用算法,比如冒泡排序算法,有些同学容易写出逻辑上重复的代码,即整型是第一套代码...

1.3K8
来自专栏菜鸟前端工程师

JavaScript学习笔记018-面向对象编程思维0构造函数0Class

882
来自专栏腾讯IVWEB团队的专栏

Promise 实践

promise已经是成为我们解决回调炼狱的常用方案,而且已经得到官方标准支持,如果你刚刚开始使用Promise,本文将帮助你了解几个常见的几个Promise的使...

2820
来自专栏前端那些事

基础 - 从模板语法数据绑定、指令到计算属性总结

写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者、社区,从谷歌辞去Angular Developer PM in...

2679
来自专栏前端小栈

javaScript循环总结(for,for-in,for-of,forEach,map,filter,every,reduce,reduceRight)

循环是每个语言都必不可少的方法,javaScript也一样,随着javaScript的发展,我们用于循环的方法也在不断改进,也越来越精简,但是用好循环却不是那...

823
来自专栏儿童编程

编程之美——让你的电脑秒变绘画大师的几行代码(Python turtle)

今天很兴奋,只用了一小段Python turtle代码(附在文末)就把电脑变成了绘画大师,太神奇了。

5264
来自专栏好好学java的技术栈

算法打卡39:喷水装置

401
来自专栏Golang语言社区

厚土Go学习笔记 | 10. 常量 与 数值常量

量的定义与变量类似,只是需要使用 const 关键字。 常量可以是字符、字符串、布尔型、数字型的值。 需要注意的是,常量不可以使用 := 语法定义。 packa...

3378
来自专栏web前端教室

=>,Es6箭头符号的前世今生

看代码能看错行,一看书就头疼且双眼流泪,没办法啊,都是娘胎里带出来的毛病,能看点是点吧。es6这种东西,虽然有一些语法糖,但毕竟也是新东西啊,得学。不学就落后,...

20110
来自专栏Golang语言社区

Golang泛型编程初体验

序言 众所周知,Golang中不支持类似C++/Java中的标记式泛型,所以对于常用算法,比如冒泡排序算法,有些同学容易写出逻辑上重复的代码,即整型是第一套代码...

4028

扫码关注云+社区