纯CSS实现三角形

2020-01-27 14:17:59

字体：大中小

来源：转载

供稿：网友

纯CSS实现三角形的形状，一个CSS特效，那个红色的小三角正是要实现的效果，我觉得这个非常实用，学会了以后就不用使用图片了，以往想用这个效果的时候，我都是制作一张带小三角的图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS特效-纯CSS实现三角形图标</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}body{background:#000;}.box{width:500px;height:400px;position:relative;margin:20px auto;}b{border-color:-moz-use-text-color transparent;border-left:8px dashed transparent;border-right:8px dashed transparent;border-style:none dashed solid;border-width:0 8px 8px;color:rgba(230,30,29,0.7);color:red/9;font-size:0;height:0;left:29px;line-height:0;position:absolute;top:-8px;width:0;z-index:2;}.bg{background:rgba(255,255,255,0.5);background:#fff/9;position:absolute;left:0;bottom:0;height:50px;width:100%;}.cc{position:relative;width:100px;height:50px;background:rgba(230,30,29,0.7);background:red/9;float:left;}</style></head><body><div class="box">  <img src="/d/file/p/2020/01-27/4dd187ddb39bf6fb6ba2762cda2f5c19.jpg">  <div class="bg"><a class="cc"><b></b></a></div></div></body></html>

上一篇：CSS实现的鼠标选中图片时的Hover效果

下一篇：CSS实现重叠线效果

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注