css 平行四边形 - 带有伪元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 平行四边形 - 带有伪元素相关的知识,希望对你有一定的参考价值。

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<a href="#yolo" class="button"><div>Click me</div></a>
<button class="button"><div>Click me</div></button>
/**
 * Parallelograms — with pseudoelements
 */

.button {
	position: relative;
	display: inline-block;
	padding: .5em 1em;
	border: 0; margin: .5em;
	background: transparent;
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	font: bold 200%/1 sans-serif;
}

.button::before {
	content: ''; /* To generate the box */
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background: #58a;
	transform: skew(45deg);
}

以上是关于css 平行四边形 - 带有伪元素的主要内容,如果未能解决你的问题,请参考以下文章

平行四边形css

带有CSS内容的div,伪元素后不可见

带有 :before 和 :after 伪元素的 CSS 过渡

带有伪元素的 CSS 波纹效果导致回流

带有 MUI 的 CSS 伪选择器

如何在带有ruby on rails的伪元素中显示来自svg sprite的图标