CSS小三角形和阴影效果
发布时间：2017-08-17, 16:28:45 分类：HTML | 编辑 off 网址 | 辅助
图集1/1
正文 1377字数 739,217阅读
代码：<style>
.border{
width: 0px;
height:0px;
border-top: 30px solid transparent;
border-left: 30px solid blue;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
}
</style><div class="border"></div>Run code
Cut to clipboard
效果
给小三角形加阴影效果
代码：
<style>.Father{
position: relative;
width: 200px;
height: 100px;
background-color: #fafafa;
box-shadow: 0 0 5px #444;
border-radius: 4px;
}
.ThreeC{
position: absolute;
top: 30px;
right: -30px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom:20px solid #fafafa;
border-left: 20px solid #fafafa;
border-right: 20px solid transparent;
transform: rotate(-135deg);
box-shadow: 0px 0px 5px #444;
}</style>
<div class="Father">
a
<div class="ThreeC"></div>
</div>Run code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
有过 4 条评论 »
再画一个border-top ；然后把图形旋转135°，再改变box-shadow的位置，
如下代码
两个小三角形合并拼接成一个大三角形
左边盒子覆盖遮挡住
<style>.Father{ position: relative; width: 200px; height: 100px; background-color: #fafafa; box-shadow: 0 0 5px #444; border-radius: 4px; } .ThreeC{ position: absolute; top: 30px; right: -20px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom:20px solid red; border-left: 20px solid blue; border-right: 20px solid transparent; transform: rotate(-135deg); box-shadow: 0px 0px 5px #444; z-index: -1; }</style> <div class="Father"> a <div class="ThreeC"></div> </div><style>.to-top-wrap{position:relative;width:100%;height:100%}.to-top-wrap:after,.to-top-wrap:before{position:absolute;top:50%;width:0;height:0;content:'';-webkit-animation-name:shine;left:50%;display:block;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite}.to-top-wrap:after{margin-top:-11px;margin-left:-10px;-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-animation-duration:1.5s;border-top:10px solid rgba(255,255,255,.5);border-right:10px solid transparent;border-left:10px solid transparent}.to-top-wrap:before{margin-top:-12px;margin-left:-15px;-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-animation-duration:3s;border-top:20px solid rgba(255,255,255,.5);border-right:15px solid transparent;border-left:15px solid transparent}@-webkit-keyframes shine{0%,100%{opacity:.1}25%,75%{opacity:.2}50%{opacity:1}}#to-top { position: fixed; z-index: 1000; right: 20px; bottom: 20px; display: none; overflow: hidden; width: 48px; height: 48px; text-align: left; text-indent: -9999px; opacity: .5; border-radius: 5%; background: rgba(0,0,0,.6); -khtml-opacity: .5; filter: alpha(opacity=50); }</style><a href="#" id="to-top" title="我要飞到最高" style="display: inline;"> <div class="to-top-wrap"></div></a>border-top-left-radius: <length> <length> //左上角 border-top-right-radius: <length> <length> //右上角 border-bottom-right-radius:<length> <length> //右下角 border-bottom-left-radius:<length> <length> //左下角<html> <head> <title></title> <meta name="" content=""> <style style="text/javascript"> .content{ width:0px; height:0px; border-left:10px solid transparent; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #151313; } </style> </head> <body> <div class="content"> </div> </body> </html>其实原理很简单，首先，border边框是以矩形无缝拼接的,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta name="" content=""> <style style="text/javascript"> .content{ width:10px; height:10px; border-left:50px solid #432a23; border-top:50px solid #38a578; border-bottom:50px solid #38c7c7; border-right:50px solid #151313; } </style> </head> <body> <div class="content"> </div> </body> </html>这样，当div的面积越来越小到为零的时候，梯形的上底也接近于零，也就变成了三角形了，这个时候，再用border的transparent属性将不想要的边框设为透明，即可获得你想要的方向的三角形啦！