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

html-css016

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

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

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

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

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

<style type="text/css">

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%

}

</style>

</head>

<body>

  <div class="csspic">

      <div class="sjx">

          <div class="test"></div>

      </div>

      <div class="img"><!-- <img src="images/5.jpg">--></div>

   

  </div>

</body>

</html>

<div class="arrow-up"><!--向上的三角--></div>

<div class="arrow-down"><!--向下的三角--></div>

<div class="arrow-left"><!--向左的三角--></div>

<div class="arrow-right"><!--向右的三角--></div>

CSS

/*向上的三角*/

.arrow-up {

width:0

height:0

border-left:30px solid transparent

border-right:30px solid transparent

border-bottom:30px solid #fff

}

/*箭头向下*/

.arrow-down {

width:0

height:0

border-left:20px solid transparent

border-right:20px solid transparent

border-top:20px solid #0066cc

}

/*箭头向左*/

.arrow-left {

width:0

height:0

border-top:30px solid transparent

border-bottom:30px solid transparent

border-right:30px solid yellow

}

/*箭头向右*/

.arrow-right {

width:0

height:0

border-top:50px solid transparent

border-bottom: 50px solid transparent

border-left: 50px solid green

}