css边框怎么向下,请问：css如何实现一个向下的三角形边框（border）?不明白的可以看下面图例。谢谢！...

用户提问

图片已经付上

推荐答案

用css的border属性实现三角

源码奉上，看吧，利用border

辅助答案

用户：edison

2016年08月13日

根据你的图片，达到这种效果有2种方法：

1.用图片png图片作为背景；

2.可以用纯css就可以达到，举个例子：

Document

body{

background-color: #444;

}

.test{

width: 15px;

height: 30px;

box-sizing:border-box;

border-top: 15px solid #f5f5f5;

border-bottom: 15px solid #f5f5f5;

/*border-left: 20px solid #0f0;*/

border-right: 15px solid transparent;

/* border-top-right-radius: 4px;

border-radius: 12px;*/

}

.csspic{

width: 200px;

height: 400px;

margin:50px auto;

background:  url(images/5.jpg) -15px top no-repeat;

-webkit-background-size: cover;

background-size: cover;

border-radius: 10px;

position: relative;

border: 15px solid #f5f5f5;

-moz-background-clip: border;

-webkit-background-clip: border-box;

-o-background-clip: border-box;

background-clip: border-box;

}

.img{

overflow: hidden;

width: 260px;

height: 400px;

}

.sjx{

position: absolute;

top:30px;

left: -15px;

background:  url(images/5.jpg) left -30px no-repeat;

-webkit-background-size: 500px;

background-size: 500px;

z-index: 9999;

}

.csspic img{

height: 100%;

}

用户：wxwj7573

2016年08月13日

求图