根据你的，达到这种效果有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/5jpg) -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/5jpg) 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/5jpg"> --></div>
</div>
</body>
</html>
css 画三角形的原理就是给一个没有宽和高的元素加边框，没有宽高的情况下，边框就是4个向心的三角形组成的。再隐掉不需的三个边，三角形就出来了，三角形大小由边框宽度决定。话说你的图呢？
下面是代码：
width:0; height:0; line-height:0; font-size:0; border:solid transparent; content:' '; border-width:5px; border-top-color:#ccc;其实很简单
HTML代码：
[html] view plain copy
<div class="sanjiao"></div>
CSS代码：
[css] view plain copy
sanjiao {
width: 0;
height: 0;
overflow: hidden;
border-width: 10px;
border-color: transparent transparent #000 transparent;
border-style: dotted dotted solid dotted;
}
其原理就是给元素加一个比较大的边框，箭头的方向就是border-color四个参数的方向（上、右、下、左），箭头指向那一边就给哪一边设置颜色，其他边透明。
这样就很方便的做了一个小的三角形图标。
其中需要注意的地方是：由于IE6不支持overflow属性，会将其他边框也显示出来，所以将不需要显示的边框的border-style属性设置为dotted就可以完美兼容IE6啦！
用css控制border成为三角形可以参考以下的代码：
a {width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;}
扩展资料：
border的css应用
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为：medium none。border-color的默认值将采用文本颜色。
提示和注释
注释：HTML 401 不推荐使用图像的 "border" 属性。在 XHTML 10 Strict DTD 和 HTML 5 中，不再支持该属性。
提示：请使用 CSS 的边框属性来改变元素的边框样式。您可以在一个外部样式表中使用 CSS 边框属性，为站点上的所有图像设置一致的边框。与单独为一个图像设置 border 属性相比，这种方式无疑拥有更高的效率。
参考资料来源：百度百科-border （英文单词）
我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。
首先我们创建一个带边框的div：
具体代码实现如下：
width: 40px;
height: 40px;
border-width: 40px;
border-style: solid;
border-color: red green blue brown;
然后我们将内部DIV的宽高设置为0：
width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;
将其他的三个边框给取消点：
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;
利用更改border的边框，我们可以随意控制写出我们想要的三角形，通过控制边框的大小来实现三角形的大小，通过控制边框的位置来改变三角形的位置。
6
使用上面的方式实现三角形有一个问题就是，三角形的方位不太好控制，但是使用其他的方式依然会面临这样的问题。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）