元素形状之“平行四边形”_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:15:07
asal
1228 orang telah melayarinya

设计场景


  • 在视觉设计中,平行四边形往往可以传达出一种 动感
  • 只让容器的形状倾斜,而保持其内容不变

嵌套元素解决方案


结构

<a href="http://www.jianshu.com/users/47a99e5b5858/latest_articles" class="button">  <div>点击我</div></a>
Salin selepas log masuk

风格

.button {  display: inline-block;  padding: 16px 32px;  background-color: #58a;  color: #fff;  text-decoration: none;  transform: skew(-45deg);}.button > div {  transform: skew(45deg);}
Salin selepas log masuk

说明:该方法虽然实现设计,但需要添加一层额外的HTML结构

伪元素解决方案


结构

<a class="button" href="http://www.jianshu.com/users/47a99e5b5858/latest_articles">点击我</a>
Salin selepas log masuk

风格

.button {  position: relative;  display: inline-block;  padding: 6px 32px;  color: #fff;}.button::before {  content: '';  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: -1;  background-color: #58a;  transform: skew(45deg);}
Salin selepas log masuk

说明:所有的偏移量都设为零,目的是让它在水平和垂直方向上都被拉伸至主元素的尺寸;该方法 适用于其他任何变形样式,当我们 想变形一个元素而不想变形它的内容 时就可以用到它

《CSS SECRETS》

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan