1、与之前写过的三角形差不多(纯css写图形 优惠券),只不过加了一个圆角
给div 加一个旋转:transform:rotate(45deg)
然后,比如想让上边框和左边框的角 成圆角,就设置border-top-left-radius:10px;
完整代码如下:
<div class="div1"></div>
<style>
.div1{
width: 0;
height: 0;
border-left: 200px solid red;
border-top: 100px solid blue;
border-right: 100px solid transparent;
border-bottom: 200px solid transparent;
transform: rotate(45deg);
border-top-left-radius: 30px;
}
</style>
效果图:
2、从第一个引申出来第二个,让div的宽和高有值,然后旋转45度,直接设置圆角就可以
完整代码如下:
<div class="div2"></div>
<style>
.div2{
width:100px;
height:100px;
border:1px solid #666;
background:#ff0;
border-radius:4px;
position:relative;
}
.div2:after{
position:absolute;
top:-8px;
left:20px;
width:14px;
height:14px;
background:#ff0;
border-left:1px solid #666;
border-top:1px solid #666;
transfomr:rotate(45deg);
border-top-left-radius:4px;
}
</style>
效果图:
3、图形拼接
上边的三角形,只有一个角是圆角的,如果三角形的三个角都是圆角,可以用推行拼接的方法(借用他人方法,嘿嘿嘿……)
看图:
如图,需要三个带圆角的菱形,带圆角的菱形,可以让正方形做一个旋转,在X轴或者Y轴做一个缩放,试过之后好像还不行,还需要斜切一下,这样就可以了。
完整代码如下:
<div class="div3"></div>
<style>
.div3{
width:100px;
height:100px;
transform:rotate(-64deg) scale(1, 0.866) skewX(-30deg);
background:#f00;
border-top-right-radius:30%;
position:relative;
}
.div3:before,
.div3:after{
content:'';
position:absolute;
background:#f00;
width:100px;
height:100px;
background:green;
border-top-right-radius:30%;
transform:rotate(135deg) scale(0.707,1.414) skewY(-26deg
) translate(50%);
}
.div3:before{
background:blue;
transform:rotate(-135deg) scale(1.414, 0.707) skewX(-26deg) translate(0, -50%)
}
</style>
效果图(背景色都添加了50%的透明度):
4、用SVG
上代码
<svg width="250" height="250" viewBox="-50 -50 300 300">
<polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200""></polygon>
</svg>
<style>
.triangle{
fill:#00f;
stroke:#f00;
stroke-width:10;
}
</style>
这里是借助了 SVG 多边形的stroke-linejoin:round 属性生成的圆角, stroke-linejoin是用来控制两条描边线段之间的过渡是什么样的,有三个值:
miter:尖角,默认值
round:圆角,实现平滑效果
bevel:连接处会形成一个斜切
stroke-width控制圆角的大小,相当于div的 border-radius
效果图:
题外话:写一个渐变的三角形
先上代码
<div class="div4"></div>
<style>
.div4{
width:200px;
height:200px;
border:1px solid transparent;
border-radius:20%;
transform:rotate(30deg) skewY(30deg) scaleX(0.866);
overflow:hidden;
}
.div4:before,
.div4:after{
content:'';
position:absolute;
width:200px;
height:200px;
background:linear-gradient(#0f0, #03a9f4);
border-radius:20% 20% 20% 55%;
transform:scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
}
.div4:after{
border-radius:20% 20% 55% 20%;
background:blue;
transform:scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}
</style>
效果图