代码:
<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>效果
给小三角形加阴影效果
代码:
<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>
如果想要实现三角形的边也有阴影,再画一个三角形
再画一个border-top ;然后把图形旋转135°,再改变box-shadow的位置,
如下代码
两个小三角形合并拼接成一个大三角形
左边盒子覆盖遮挡住
上下顶部底部两个小三角形叠加闪烁动画返回顶部按钮css3
渐变闪烁动画返回头部按钮纯css按钮灰白颜色
不需要图片,纯css创建三角形
其实原理很简单,首先,border边框是以矩形无缝拼接的,
这样,当div的面积越来越小到为零的时候,梯形的上底也接近于零,也就变成了三角形了,这个时候,再用border的transparent属性将不想要的边框设为透明,即可获得你想要的方向的三角形啦!