Question

如何在对角线样式中设计全宽度但在顶部和底部具有V形的DIV底边。

注意：我已经尝试了许多可能的解决方案来设计与我提供的图像参考完全相同但我找不到任何优化解决方案。倾斜方法，Top＆amp;底部Div使用一个中间分配边框宽度（我尝试了总共3个Div设置样式，但它只允许我塑造div的两个角但是我找不到任何可能的解决方案。

DIV CSS Shaping

这是我想设计的东西。

先谢谢你的帮助。

他是我尝试过的代码变体：

＆＃13;

.tridiv{
	width: 1170px;
    margin: 0 auto;
    background-color: #CCCCCC;
    color: #000000;
    height: 500px;
    box-sizing: border-box;
/*-webkit-clip-path: polygon(100% 0, 100% 71%, 50% 100%, 0 65%, 0 0, 51% 33%);
clip-path: polygon(100% 0, 100% 71%, 50% 100%, 0 65%, 0 0, 51% 33%);*/
	}

.tridiv:before {
    content:"";
    -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
    width: 90%;
    left: 0;
	right:0;
    height: 500px;
    background-color: #555;
    position: absolute;
    z-index: -1;
	margin:0 auto
}


.box {
  background-color: skyblue;
  margin-top: 50px;
  padding: 5% 20px; /* Added a percentage value for top/bottom padding to keep the wrapper inside of the parent */
  
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  transform: skewY(-5deg);
}

.box > .wrapper {
  -webkit-transform: skewY(5deg);
  -moz-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  -o-transform: skewY(5deg);
  transform: skewY(5deg);
}

＆＃13;

<div class="box">
      <div class="wrapper">
        <h1>This is a heading</h1>
        <p>This is a sub-heading</p>
        <p>
          <a href="http://stackoverflow.com/questions/22352311/how-do-i-draw-a-diagonal-div/22352383#22352383">
            How do I draw a Diagonal div?
          </a>
        </p>
      </div>
    </div>

<div class="tridiv">
	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu dapibus quam. Proin non faucibus nisi. Quisque ac mi lectus. Suspendisse metus purus, congue nec ornare eu, hendrerit vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat diam elementum lacus porta rhoncus. In hac habitasse platea dictumst. Aenean volutpat massa quis nulla elementum et commodo ligula fringilla. Sed pellentesque, risus eu rutrum volutpat, sem elit feugiat tellus, id molestie sapien turpis sit amet ante. Maecenas nec mollis orci. Integer lacus nulla, facilisis ac ullamcorper sit amet, commodo quis est. Quisque pharetra urna vitae leo suscipit vulputate luctus enim tincidunt. Curabitur blandit lobortis lobortis. Phasellus rhoncus arcu sed nunc tempus ut dictum tellus elementum.</p>
</div>

＆＃13;

Answer 1

我对CSS不太好，但作为一个概念证明，这是一个混乱的例子，表明你可以用::before，::after和transform来做。

这有一个好处，transform拥有比clip-path更好的浏览器支持。虽然......很可能需要进行一些调整（包括正确的数学运算）。

.container {
  width: 600px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.arrow-down::before,
.arrow-down::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  width: 400px;
  height: 200px;
  z-index: -10;
  background: #5b9aff;
}

.arrow-down::before {
  left: -60px;
  transform: rotate(20deg);
}

.arrow-down::after {
  left: 248px;
  transform: rotate(-20deg);
}

.arrow-down {
  position: relative;
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 11pt;
}

.arrow-down h1 {
  padding-top: 80px;
}

<div class="container">
  <div class="arrow-down">
    <h1>
Lorem Ipsum Dolor Sit Amet
</h1>
    <p>
      Lorem Ipsum Dolor Sit Amet<br>
      Yadda dadda, bleh foo bar<br>
      Aww yeah, CSS is cool
    </p>
  </div>
</div>

Answer 2

经过大量测试后，我找到了一个可能解决这个问题的方法，我认为它可以完美地运作。

请检查代码，如果您发现任何问题或错误，请尝试解决此问题。

.wrapper{width:100%; margin:0 auto; background:#efefef; display:block; min-height:500px; box-sizing: border-box; position: relative; overflow: hidden;}

/* First Div which work as Parent DIV */
.firstdiv{
	width:0;
	height:270px;
	border-top: 80px solid #fff;
	border-left: 50vw solid #0eaaee;
	border-right: 50vw solid #0eaaee;
	border-bottom:0;
}

/* Second DIV which work as Overlapping DIV*/
.seconddiv{
	width:0;
	height:130px;
	border-top: 80px solid #0eaaee;
	border-left: 50vw solid #fff;
	border-right: 50vw solid #fff;
	border-bottom:0;
	background:#fff
	
}
/* Content Section for Main Parent DIV Targetting with Content */
.content{position:relative; width:90%; margin:-235px auto auto auto; height:200px; color:#fff; font-family:Roboto Condensed; text-align:center}
.content h1{font-size:46px;}
.content p{ font-size:18px; line-height:28px;}

<div class="wrapper">
    <div class="firstdiv">
    </div>
        <div class="content">
        	<h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis turpis a lorem pellentesque placerat et nec libero. Proin vitae nulla eget est bibendum commodo vitae id orci. Nam et lacinia ex. Nullam eget condimentum diam, in ultricies nibh. Vestibulum scelerisque tempus eros quis bibendum. Maecenas at pulvinar libero. Fusce commodo leo non tempor facilisis.</p>
        </div>
    
    <div class="seconddiv">
    </div>
</div>

如何设计V形风格的对角线型DIV？

2 个答案: