Article Detail

CSS小三角形和阴影效果

代码： .border{ width: 0px; height:0px; border-top: 30px solid transparent; border-...

HTML 阅读 76.2万 3 分钟阅读 2017-08-17 16:28

代码：

<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>

Comments 评论区

广西南宁市 2017-08-17 16:57

如果想要实现三角形的边也有阴影，再画一个三角形
再画一个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>

#⁰

广西南宁市 2017-08-18 12:12

上下顶部底部两个小三角形叠加闪烁动画返回顶部按钮css3

<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>

广西南宁市2017-08-18 12:14:25

渐变闪烁动画返回头部按钮纯css按钮灰白颜色

#⁰

广西南宁市 2017-08-24 17:22

border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角

#⁰

广西南宁市 2017-09-18 17:28

不需要图片，纯css创建三角形

<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属性将不想要的边框设为透明，即可获得你想要的方向的三角形啦！

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。