博客

css画出三角形，√，×

  • Post author:
  • Post category:其他


在这里插入图片描述 

<style>
	.triangle {
	display: inline-block;
	margin-bottom: 10px;
	width: 0;
    height: 0;
}
.top {
	border: 50px solid #eaeaea;
    border-top-color: #ffc0cb;
}
</style>
<div class="triangle top"></div>

在这里插入图片描述 

<style>
.triangle {
	display: inline-block;
	margin-bottom: 10px;
	width: 0;
    height: 0;
}
.left {
    border-left: 100px solid #eaeaea;
    border-top: 100px solid #ffc0cb;
}
</style>
<div class="triangle right"></div>

在这里插入图片描述 

<style>
.triangle {
	display: inline-block;
	margin-bottom: 10px;
	width: 0;
    height: 0;
}
.left {
    border-left: 100px solid #eaeaea;
    border-top: 100px solid #ffc0cb;
}
</style>
<div class="triangle left"></div>

在这里插入图片描述 

<style>
.true {
	width: 50px;
	height: 20px;
	border: 1px solid red;
	border-width: 0 0 1px 1px;
	transform: rotate(-45deg);
}
</style>
<div class="true"></div>

在这里插入图片描述 

<style>
	.false {
	width: 40px;
	height: 1px;
	background: red;
	transform: rotate(45deg);
}
.false:after {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background: red;
	transform: rotate(-90deg);
}
</style>
<div class="false"></div>

在这里插入图片描述 

<style>
.dayu {
    margin-left: 10px;
	width: 30px;
	height: 30px;
	border: 1px solid red;
	border-width: 0 0 1px 1px;
	transform: rotate(45deg);
}
</style>
<div class="dayu"></div>


版权声明：本文为qq_34720531原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。