使用CSS的倾斜边框 [英] Slanted border using CSS

问题描述

如何设置div的样式以使其类似于下面的图像?

How could I style a div to like the below image?

推荐答案

您可以将半三角形与伪元素一起使用.

You can use half triangle with the pseudo element.

.container {
  padding: 20px;
  background-color: #F8F8F8;
  max-width: 200px;
}
.rectangle {
  width: 200px;
  height: 100px;
  background-color: #003781;
  position: relative;
}
.rectangle:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #F8F8F8 transparent;
}

<div class="container">
  <div class="rectangle"></div>
</div>

Jsfiddle

这篇关于使用CSS的倾斜边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！