tailwindCSS 制作一个三角形

12 min read
<div class="w-16 overflow-hidden inline-block">
 <div class=" h-11 w-11 bg-black rotate-45 transform origin-bottom-left"></div>
</div>

<div class="w-16 overflow-hidden inline-block">
 <div class=" h-11 w-11 bg-black -rotate-45 transform origin-top-left"></div>
</div>

<div class="w-11  overflow-hidden inline-block">
 <div class=" h-16  bg-black -rotate-45 transform origin-top-right"></div>
</div>

<div class="w-11  overflow-hidden inline-block">
 <div class=" h-16  bg-red-600 rotate-45 transform origin-top-left"></div>
</div>

<div class="w-11  overflow-hidden inline-block">
 <div class=" h-16  bg-black -rotate-45 transform origin-bottom-right"></div>
</div>

<div class="w-11  overflow-hidden inline-block">
 <div class=" h-16  bg-black rotate-45 transform origin-bottom-left"></div>
</div>

<div class="w-11  overflow-hidden inline-block">
 <div class=" h-16  bg-black -rotate-45 transform origin-top-left"></div>
</div>

<div class="w-11  overflow-hidden inline-block">
 <div class=" h-16  bg-black rotate-45 transform origin-top-right"></div>
</div>

Tailwind play https://play.tailwindcss.com/

使用原生CSS 创建一个三角形

原理：before伪元素创建个小正方形，旋转45度角。颜色使用inherit。这样更改颜色的话只需要更改一处就行了。

<style type="text/css">
	html,body{
		padding: 0;
		margin:0;
	}
	.box{
		width: 20rem;
		height: 8rem;
		border-radius: 1rem;
		border:1px solid #dd9717;
		background: pink;
		margin-top: 10rem;
		box-sizing: border-box;
		position: relative;
	}
	.box::before{
		content:'';
		position: absolute;
		left: 2rem;
		top:-1.05rem;
		padding: 1rem;
		border:inherit;
		border-right: 0;
		border-bottom: 0;
		border-radius: 0.2rem;
		background:inherit;
		transform: rotate(45deg);
	}
</style>
<body>
<div class='box'></div>
</body>