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的图标