scss 三角形CSS

Posted 2021-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 三角形CSS相关的知识，希望对你有一定的参考价值。

	//type 1 - Content + Triangle
	&:before {
		content: '';
		width: 30px;
		height: 30px;
		transform: rotate(45deg) translateX(-50%);
		position: absolute;
		// top: 0;
		left: 50%;
		background-color: white;
	}
	
	
	//type 2 - Content - Triangle
	&:before {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;
			bottom: 0;
			height: 50px;
			background-color: white;
			clip-path: polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%);
		}

以上是关于scss 三角形CSS的主要内容，如果未能解决你的问题，请参考以下文章