CSS - Angled background on card

Question

I'm attempting to create a card based off of this design:

At the moment I am having difficulties creating the background of this card. I have applied the a transform: skew(-15deg); property to my .blue-background class. I am adjusting the skewed blue half of the card with margins and it does not give the same full look as it does in the photo above.

How can I alter my CSS in order to have a full look like the design and is there a way not to have the text "Purchase Now" not affected by the skew effect.

Here is a jsfiddle:

Here is a code snippet on what I am using for the blue background:

.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
}

score 2 · Answer 1 · answered Sep 15 '20 at 17:29

it's an example .. you can try this

maybe it will help you..

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>

score 1 · Answer 2 · edited Sep 15 '20 at 17:58

Try the following snippet, this should be what you're looking for:

.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>

Additionally, here is a link for the same code on jfiddle: https://jsfiddle.net/oamf16vp/2/

CSS - Angled background on card

2 Answers2