您现在的位置是：网站首页> 编程资料编程资料

css3实现小箭头各种图形效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-03 898人已围观

简介 这篇文章主要介绍了css3实现小箭头各种图形效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。

最常用的就是用css实现的小三角了

 #triangle-up{ display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-bottom:50px solid red;} #triangle-down { display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-top:50px solid red;} #triangle-left { display:inline-block; width:0; height:0; border-top: 30px solid transparent; border-right: 50px solid red; border-bottom: 30px solid transparent;} #triangle-right{ display:inline-block; width:0; height:0; border-top: 30px solid transparent; border-left: 50px solid red; border-bottom: 30px solid transparent;}


 

 #triangle-topleft { display:inline-block; width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; } #triangle-topright { display:inline-block; width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid transparent; } #triangle-bottomleft { display:inline-block; width: 0; height: 0; border-bottom: 50px solid red; border-right: 50px solid transparent; } #triangle-bottomright { display:inline-block; width: 0; height: 0; border-bottom: 50px solid red; border-left: 50px solid transparent; }

通过这样的小箭头在项目中我们可以实现验证提示层箭头这样的样式，非常的实用，再也不用为提示层样式发愁啦。


 

我们看到了实现css小箭头的style样式中都用到了transparent这样的一个属性，transparent到底是什么意思？于是查看了css参考手册，定义是：

用来指定全透明色彩。

  • transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
  • 在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
  • 在CSS2中，border-color也开始接受transparent作为参数值。
  • 在CSS3中，transparent被延伸到任何一个有color值的属性上。

transparent我总结意思就是透明，无颜色的。


 

看图，三角形的实现实际上是一个宽度和高度都为0的div的四个边框实现的，如果我们要实现朝下的箭头，那就要让div的左~右 边框都为透明(透明但左右边框还占位置)。


 

左上箭头 实现思路是什么呢？div的右边框和底部边框都为透明，这样左上角的箭头就露出来了。


 

css3实现心形

 #heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }

到此这篇关于css3实现小箭头各种图形效果的文章就介绍到这了,更多相关css 小箭头 内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：奇妙的 CSS 属性 MASK详解css中filter属性和backdrop-filter的应用与区别详解详解HTML5中CSS外观属性CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)CSS字体、文本、列表属性详细介绍CSS 继承 inherit属性的方法利用CSS中的 outline-offset 属性实现加号css一些不常见但很有用的属性操作大全

下一篇：CSS让子容器超出父元素(子容器悬浮在父容器效果)css使用flexbox布局容器内多元素水平居中Css浮动元素外层容器高度为0(无高度)的解决方法CSS常见的让元素水平居中显示的方法清除网页浮动CSS的做法CSS教程：彻底弄懂闭合浮动元素

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网