使用CSS

Question

我正在开发一个项目，我希望使用CSS创建一个对角线div，如下图所示：

Answer 1

您可以使用css“剪辑路径”。这很容易理解。

#shape {
  -webkit-clip-path: polygon(0 55%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0 55%, 100% 0%, 100% 100%, 0% 100%);
  width:200px;
  height:200px;
  background-color:black;
}

<div id='shape'></div>

Answer 2

.myDiv {
	width: 400px;
	height: 400px;
	border: 1px solid #000;
	background-image: url('https://pbs.twimg.com/profile_images/739247958340698114/fVKY9fOv.jpg');
	position: absolute;
	overflow: hidden;
}

.myDiv:after {
	content: '';
	position: absolute;
	z-index: 4;
	width: 0;
	height: 0;
	border-bottom: 800px solid red;
	border-left: 800px solid transparent;
	top: -40%;
	left: -50%;
	-ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
}

p {
	position: relative;
	top: 70%;
	z-index: 5;
	font-size: 35px;
	text-align: center;
}

<div class="myDiv">
	<p>Hello World!</p>
</div>

Answer 3

使用Bootstrap和Transition Skew CSS属性https://jsfiddle.net/oocputgz/24/

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="blog-post-image">
<img src="https://i.imgsafe.org/20ff17cabf.jpg" class="img-responsive center-block" />
</div>
<div class="post-detail_container">
<div class="sperator"></div>
<div class="post-content">
<h3 class="post-title">
Hello World
</h3>
</div>
</div>
</div>
</div>
</div>

CSS样式：

.post-detail_container
{
    position:relative;   
}

#blog-items .item
{
    padding:0px 15px;
}
.sperator
{
   position: absolute;
top: 0;
width: 100%;
height: 100px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: skew(0, -7deg);
-moz-transform: skew(0, -7deg);
-ms-transform: skew(0, -7deg);
-o-transform: skew(0, -7deg);
transform: skew(0, -7deg);
background: red;
}
.post-content
{
    background-color:red;
    padding:15px 15px;
    min-height: 300px;
}

.post-title
{
  font-size: 40px;
  line-height: 24px;
  margin-bottom: 2px;
  color: #fff;
  text-align: center;
  margin-top: 88px;
}