1.用纯css绘制带三角型的气泡框,不适合用图片
2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分。
例子:先画一个三角吧
.dr{ width:0px; height:0px; border:10px solid black; border-bottom:10px solid red; } <div class=dr></div>
结果:
(1)当我们想要绘制朝上着上方的小三角,只要把黑色区域改为白色或透明即可。border:10px solid transparent 或:border:10px solid #fff
(2)尖朝上的三角形 设置 border-bottom 所以朝左border-right 朝右 border-left 朝下 border-top
3.我们已经绘画了三角型,但是我们要的是三角形边框,改怎么做呢?
思路:外边是一个实的三角形,用上面的方法绘制,里面在做一个小三角形叠在里面,颜色是白色,比外面的三角形小一点点,这样不就留下框了么。
<style> .content{ width:0px; height:0px; border:10px solid black; border-bottom:10px solid red; } .inner{ width:0px; height:0px; border:10px solid yellow; border-bottom:10px solid red; } </style> </head> <body> <div class="content"> <div class="inner"> </div> </div> </body>
4.经过大神的点播,利用:before和after 来实现这个更方便些
<style> .content{ width:0px; height:0px; border:10px solid transparent; border-bottom:10px solid red; margin-left:10px; } .content:after{ content:""; display:block; width:0px; height:0px; border:10px solid transparent; border-bottom:10px solid white; position:relative; top:-9px; left:-10px; } </style>
结果:
相关推荐
CSS绘制三角形
纯CSS写带边框的三角形
网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝...
用纯css绘制三角形,不是用图片
还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!
聊天内容需要用到气泡修饰,纯CSS开发的气泡式提示框,我们都熟悉使用CSS来生成页面上丰富的样式
主要为大家详细介绍了纯CSS绘制三角形箭头图案技术,如何使用:before和:after绘制CSS三角形,感兴趣的小伙伴们可以参考一下
气泡提示框牵扯到的技术有:JS响应鼠标的事件、纯CSS制作三角形,附截图及示例代码,感兴趣的朋友可以参考下
CSS三角形绘制方法,学会了这个,其它的也就简单。
纯css绘制几何图形,三角形、圆形(半圆、1/4圆)、多边形(平行四边形、梯形、五边形、六边形、八边形)
1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。...到这里就很清晰了,只要把想要的保留,其它的设置为透明就可以达到三角形的效果,那么:border:5
代码简介:纯CSS绘制星星评分特效是一款纯CSS写的星星评分展示效果。主要是border的一个非常巧妙的实际运用,非常不错。
文档是我在网上看到的,并用浏览器的工具保存的pdf版,供大家学习; 文档的名称标明了文档的出处
纯CSS3炫酷元素边框线条动画特效 ,自 动 循 环运动。
7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框
用css3实现的气泡框,各种方向的箭头,还有各种样式的都有,代码内嵌在页面里面,不熟悉的可以用工具直接查看。