我怎样才能创建一个div形状，就像我用100％宽度共享的那个

Question

我想创建一个div，其形状如上图所示，我希望它的宽度为100％。

下面是我尝试过的HTML和CSS。 我能够制作一个三角形，但它不能使用100％宽度的div：

HTML：

<div class="triangle-up"><div></div></div>

CSS：

.triangle-up {
    width: 25%;
    height: 0;
    padding-left:25%;
    padding-bottom: 25%;
    overflow: hidden;
}
.triangle-up div {
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #4679BD;
}

Answer 1

3d css转换怎么样？

HTML：

<div class="triangle-up"><div></div></div>

的CSS：

body{
   background:black;
}
.triangle-up div{
width:400px;
    height:150px;
    background:cyan;
    -webkit-transform:rotateY(40deg);
    margin:50px;
}
.triangle-up{
    -webkit-perspective: 500px;
}

这是一个示例FIDDLE

编辑：

基本上你给容器div triangle-up的深度为500px;然后用y轴旋转内部div。

可以在THIS好文章中找到更全面的解释。

Answer 2

您可以将伪元素与transform:rotate()一起使用。

<强> FIDDLE

这使得2个单独的元素（伪元素:before/:after）具有与div相同的背景颜色，并旋转它们以创建所需的形状。

• 您可以在后台显示图像。
• 响应宽度和高度。
• 由于转换属性不在div元素上，因此它会让您将内容放在您的形状中而不会对其进行转换。
• 少 HTML 标记。

HTML：

 <div></div>

CSS：

div{
    height:40%;
    margin:10% 0 0;
    background:#1EC8D7;
    position:relative;
    z-index:2
}
div:after,div:before{
    content:"";
    position:absolute;
    background:#1EC8D7;
    width:110%;
    height:100%;
    z-index:-1;
    right:0;
}
div:before{
    top:0;

    transform-origin:100% 0;
    -ms-transform-origin:100% 0;
    -webkit-transform-origin:100% 0;

    transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
}
div:after{
    bottom:0;

     transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    -webkit-transform-origin:100% 100%;

    transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
}

Answer 3

JSBIN

HTML

  <div class="container"><div class="triangle-up"><div></div></div></div>

CSS

.container{ 
  width: 500px;
  background-color: #000; 
  overflow: hidden;
}
.triangle-up {
    height: 0;
    padding-bottom: 24%;
}
.triangle-up div {
    width: 0;
    height: 0;
    border-left: 900px solid #4679BD;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
}