如何实现css绘制透明三角形
程序员文章站
2022-05-06 09:51:33
...
这篇文章主要教大家使用css绘制透明三角形,css绘制三角形很简单,如何绘制透明的三角形,本文为大家解决这个问题,感兴趣的小伙伴们可以参考一下
css实现下图样式,具体像素值记不住了,很好设置,html code (2014百度秋招面试题):
<p id="demo"></p>
分析:这个样式的关键就在三角形和三角形实现了之后的变成只有个边框的三角形。利用元素的:after和:before伪元素(请自动忽略低版本IE)。
思想:先实现个正方形,在实现个三角形层,放在右上角,然后再实现一个透明的三角形覆盖黑色三角形的内部,只留边框。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset=utf-8> <title>demo</title> </head> <style> #demo{ width:100px; height:100px; border:2px solid #000; } #demo:before{ content:''; display:block; width:0; height:0; position:relative; top:10px; left:100px; border-left:9px solid #000; border-top:7px solid transparent; border-bottom:7px solid transparent; } #demo:after{ content:''; display:block; width:0; height:0; position:relative; top:-2px; left:100px; border-left:7px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; } </style> <body> <p id='demo'></p> <script> </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
对于css中使用rgba和opacity设置透明度的区别分析
以上就是如何实现css绘制透明三角形的详细内容,更多请关注其它相关文章!
推荐阅读
-
css如何在菜单上实现对勾?(代码)
-
请问如何实现table的外框和内框线的粗度不同??_html/css_WEB-ITnose
-
css border实现的三角形图案_html/css_WEB-ITnose
-
CSS3如何实现2D转换和3D转换,他们有何区别_html/css_WEB-ITnose
-
在没有服务器的网页之间如何实现数据的共享_html/css_WEB-ITnose
-
css3实现模拟select 以及其中的三角形_html/css_WEB-ITnose
-
css如何实现自动编号?计数器的使用
-
css3如何写三角形
-
css如何实现固定的背景图像
-
css3如何实现过渡动画的效果?css3过渡效果的实现方法