CSS - 卡片上的倾斜背景[重复]

Question

我正在尝试根据此设计创建一张卡片：

目前我在创建这张卡片的背景时遇到了困难。我已将 transform: skew(-15deg); 属性应用于我的 .blue-background 类。我正在调整带有边距的歪斜的蓝色一半卡片，它的外观与上面的照片不同。

如何更改我的 CSS 以使外观与设计完全一致？有没有办法使“立即购买”文本不受歪斜效果的影响。

这是jsfiddle：

这是我用于蓝色背景的代码 sn-p：

.blue-background {
    background: linear-gradient(#0f2741 0,#2f425a 100%);
    margin: 0 auto 0 85px;
    position:relative;
    transform: skew(-15deg);
}


.bg-white {
    background-color: #fff !important;
    overflow: hidden
}

Answer 1

这是一个例子..你可以试试这个

也许它会帮助你..

div {
  min-width: 100%;
  min-height: 100%;
   background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 50%, red 50%);
   background-size:100%;
}
  

<div>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui.
   
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui.
   
</div>

Answer 2

试试下面的sn-p，这应该就是你要找的：

.blue-background {
    background: linear-gradient(#0f2741 0,#2f425a 100%);
    margin: 0 auto 0 85px;
    position:relative;
    transform: skew(-15deg);
}

.bg-white {
    background-color: #fff !important;
    overflow: hidden
}

.text-white {
 color:white; 
}

.flex {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 50%;
    height: 300px;
    border-radius: 10px;
   
}

.height-full {
    height: 100%;
}

.padding-vertical-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.flex__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex--directionColumn {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    float: left;
}
.panelBox--bigShadow {
    -webkit-box-shadow: 0 5px 25px 0 rgba(67,94,131,.35);
    box-shadow: 0 5px 25px 0 rgba(67,94,131,.35);
    width:100%;
}
.font-size-s {
    font-size: .9rem;
}
.width45 {
    width: 45%;
}
.text-center {
    text-align: center !important;
}
.padding-left-50 {
    padding-left: 50px !important;
}
.padding-all-20 {
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
}

.margin-vertical-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
.right_box{
  width: 227.5px;
    background: linear-gradient(#0f2741 0,#2f425a 100%);
    transform: skew(-15deg);
    position: relative;
    right: -33px;
    float:right;
}
.left_content{
  padding:20px;
}

<div
  class="flex__item flex--directionColumn " 
>
  <div
    class="flex height-full panelBox--promo panelBox--bigShadow bg-white"
  >
    <div
      class="flex__item flex--directionColumn padding-left-20 left_content"
    >
      <header>
        <div>
          <div class="h4">Exclusive Content</div>
        </div>
      </header>
      <section class="font-size-s">
        <p class="margin-bottom-20">
          A subsciption provides 
        </p>
        <ul class="list--faIcons font-size-13px">
          <li class="list__item--faIcon margin-bottom-7">
            <i class="fa fa-check-circle"></i>
            <p>Full access to 1m statistics</p>
          </li>
          <li class="list__item--faIcon margin-bottom-7">
            <i class="fa fa-check-circle"></i>
            <p>All available resources</p>
          </li>
          <li class="list__item--faIcon margin-bottom-7">
            <i class="fa fa-check-circle"></i>
            <p>Available to download in PNG, PDF, XLS format</p>
          </li>
        </ul>
      </section>
    </div>
    <div class="right_box">
      <div
      class="text-white text-center">
      <span class="triangle-white-right100"></span>
      <div class="h4 margin-bottom-20 text-color--white">Purchase now</div>
     
    </div>
    </div>
    
  </div>
</div>

此外，这里是 jfiddle 上相同代码的链接：https://jsfiddle.net/oamf16vp/2/