如何从css倾斜这个形状？ [英] How to skew from css for this shape?

问题描述

我试图制造出像这样的方块，但无法像设计中那样制作。我怎么做到的？你可以帮我吗？这里是所需的块

以及我试过的代码：

<

  .section-1 {background：green; height：100px;}。section-2 {display：flex; align-items：center;}。col-img {margin-top：-40px; position：relative;}。col-img：after {top：40px;位置：绝对;对：100％;宽度：10px;背景：紫色;内容：''; bottom：0;}。col-img img {width：100％; vertical-align：top;}。section-2 .col {width：50％;}  

 < div class =section-1> < / div>< div class =section-2> < div class =col> < p> Lorem ipsum dolor，坐在amet consectetur adipisicing elit。 Harum voluptatem beatae quia facilis nobis，dolore quidem nostrum！ Blanditiis eveniet dolor a，laudantium repudiandae rem commodi ea adipisci。 Eius，obcaecati rerum。< / p> < / DIV> < div class =col col-img> < img src =http://via.placeholder.com/650x650alt => < / div>< / div>  

解决方案

  body {margin：0;}。box {padding：40px calc（100％ -  250px）10px 20px;箱尺寸：边界盒;边框顶部：30px实心浅蓝色; border-bottom：5px纯黄色;高度：350像素;背景：线性渐变（120deg，浅蓝色280px，透明280px）0 0/100％40px无重复，线性渐变（120deg，白色250px，黄色250px，黄色280px，透明280px）0 0/100％100％no -repeat，url（https://lorempixel.com/1000/1000/）0 0 / cover no-repeat;}  

 < div class =box> lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum< / div>   
 
或者使用更多元素和一些转换更简单： 
 
 
 
 
 
  body {margin：0;}。box {box-sizing：border-box;边框顶部：30px实心浅蓝色; border-bottom：5px纯黄色;高度：100vh;显示：弯曲;背景：url（https://lorempixel.com/1000/1000/）0 0 / cover no-repeat;}。content {padding：20px 5px 0 30px;箱尺寸：边界盒;宽度：40％;边框顶部：20px实心浅蓝色;背景：线性梯度（黄色，黄色）100％0 / 10px 100％无重复;变换：歪斜（-20deg）; transform-origin：左上角; background-color：#fff;}。content span {display：inline-block; transform：skew（20deg）;}  
 
 < div class =box>< div class =content>< span> lorem ipsum lorem ipsum lorem ipsum lorem ipsum< / span>< / div>< / div>  

$ b

I have tried to make like this block but wasn't able to make as in the design. How can I make it? Can you help me? Here is desired block

and code I have tried:

.section-1 {
  background: green;
  height: 100px;
}

.section-2 {
  display: flex;
  align-items: center;
}


.col-img {
  margin-top: -40px;
  position: relative;
}

.col-img:after {
  top: 40px;
  position: absolute;
  right: 100%;
  width: 10px;
  background: purple;
  content: '';
  bottom: 0;
}

.col-img  img{
  width: 100%;
  vertical-align: top;
}

.section-2 .col {
  width: 50%;
}

<div class="section-1">
  
</div>
<div class="section-2">
  <div class="col">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum voluptatem beatae quia facilis nobis, dolore quidem nostrum! Blanditiis eveniet dolor a, laudantium repudiandae rem commodi ea adipisci. Eius, obcaecati rerum.</p>
  </div>
  <div class="col col-img">
    <img src="http://via.placeholder.com/650x650" alt="">
  </div>
</div>

解决方案

I would consider multiple background and some border like this like this:

body {
  margin:0;
}
.box {
  padding:40px calc(100% - 250px) 10px 20px;
  box-sizing:border-box;
  border-top:30px solid lightblue;
  border-bottom:5px solid yellow;
  height:350px;
  background:
  linear-gradient(120deg, lightblue 280px,transparent 280px)0 0/100% 40px no-repeat,
  linear-gradient(120deg,white 250px,yellow 250px,yellow 280px,transparent 280px)0 0/100% 100% no-repeat,
  url(https://lorempixel.com/1000/1000/) 0 0/cover no-repeat;
}

<div class="box">
lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum
</div>

Or more easier way with more element and some transformation:

body {
  margin:0;
}
.box {
  box-sizing:border-box;
  border-top:30px solid lightblue;
  border-bottom:5px solid yellow;
  height:100vh;
  display:flex;
  background:url(https://lorempixel.com/1000/1000/) 0 0/cover no-repeat;
}
.content {
  padding:20px 5px 0 30px;
  box-sizing:border-box;
  width:40%;
  border-top:20px solid lightblue;
  background:linear-gradient(yellow,yellow) 100% 0/10px 100% no-repeat;
  transform:skew(-20deg);
  transform-origin:top left;
  background-color:#fff;
}
.content span{
  display:inline-block;
  transform:skew(20deg);
}

<div class="box">
<div class="content">
<span> lorem ipsum lorem ipsum lorem ipsum lorem ipsum</span>
</div>
</div>

这篇关于如何从css倾斜这个形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！