怎么新建MySQL数据库

发布时间:2022-08-24 作者:admin
阅读:302
今天就跟大家聊聊有关“使用CSS怎样来绘制几何图形,代码是什么”的内容,可能很多人都不太了解,为了让大家认识和更进一步的了解,小编给大家总结了以下内容,希望这篇“使用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
上述内容具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多"使用CSS怎样来绘制几何图形,代码是什么"的内容,大家可以关注群英网络的其它相关文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

二维码-群英

长按识别二维码并关注微信

更方便到期提醒、手机管理

7*24 全天候服务

售前 400-678-4567

售后 0668-2555666

售后 400 678 4567

信息安全 0668-2555 118

域名空间 3004329145