带圆角的三角形

最新推荐文章于 2023-04-11 10:00:22 发布

齐露

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量1.4k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/qi__lu/article/details/125439590

版权

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>