请问:css如何实现一个向下的三角形边框(border)?不明白的可以看下面图...
发布网友
发布时间：2022-04-30 15:15
共3个回答
热心网友
时间：2022-04-16 06:03
根据你的图片，达到这种效果有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>
热心网友
时间：2022-04-16 07:21
追答如楼下
热心网友
时间：2022-04-16 08:56
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用css的border属性实现三角</title>
<style type="text/css">
<!--
.box{ width:300px; height:300px; background:#CCC; position:relative; top:100px;left:100px }
.to-top{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:0 6px 6px 6px; position:absolute; left:30px; top:0;margin-top:-6px;}
.to-right{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 0 6px 6px; position:absolute; right:0px; top:30px;margin-right:-6px;}
.to-bottom{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:6px 6px 0 6px; position:absolute; right:30px; bottom:0;margin-bottom:-6px;}
.to-left{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 6px 6px 0 ; position:absolute; left:0; bottom:30px;margin-left:-6px;}
-->
</style>
</head>
<body>
<div class="box"><em class="to-top"></em><em class="to-right"></em><em class="to-bottom"></em><em class="to-left"></em></div>
</body>
</html>
源码奉上，看吧，利用border追问确实可以！谢谢！我没金币了！下次怎么问你呢？告诉我你的QQ？
追答确定我的为最佳答案就行了，有问题直接给我百度这个帐号发信就行
