Question

我想在正常和倾斜的内容中创建一个div或部分，其边缘位于内容的底部。结果应该是这样的： http://themeforest.net/item/delicious-responsive-app-landing-html-theme/full_screen_preview/7965552 有人能帮助我吗？

Answer 1

您提供的示例使用具有透明背景的图像。

可以在CSS中使用。

JSFiddle

HTML：

<div></div>

CSS：

div {
  height:200px;
  width:1000px;
  background:indianred;
  margin-top:250px;
  position:relative;
}

div::before {
  content:'';
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid indianred;
  border-left: 1000px solid transparent;
  top:-100px;
}

div::after {
  content:'';
  position:absolute;
  width: 0;
  height: 0;
  border-top: 100px solid indianred;
  border-right: 1000px solid transparent;
  bottom:-100px;
}

如果您想要浏览器兼容性，则必须坚持使用图像方法。

Answer 2

你可以使用背景技巧：

<div class="div1">
    content 1
</div>
<div> content 2</div>


.div1 {
    background: linear-gradient(352deg, transparent 125px, #c00 0) bottom right;}

检查这个小提琴：http://jsfiddle.net/2f7Ds/

用斜边创建一个div（Html，Css）

2 个答案: