Twitter Bootstrap Question posted in

Is it possible to create Multiple CSS3 using Transform or gradient Background?-Twitter bootstrap

I want to achieve this kind of Layout using Css Transform or gradient Background?(see image below). Right now im stuck with it using conic-gradient, i dont know how to put a gradient background on it.

enter image description here

see snippet below. run the code snippet as fullpage.

Thanks Guys.

//gol-bg
.my-bg-image {
  background: url("https://via.placeholder.com/728x90.png?text=Background-image+Backgground-image+Background-image") 0 0 / cover no-repeat;
}
.gol-bg {
  display: block;
  height: 200px;
  width: 700px;
  position: relative;
  background: conic-gradient(
     transparent 136deg, transparent 0 140deg, yellow 140deg);
  .my-content {
    position: relative;
    z-index: 1;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-dark my-bg-image">
  <div class="row no-gutters">
    <div class="col-6">
      <div class="gol-bg">
        <div class="my-content">content</div>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    I’m not sure if i understood your question correctly but

    Yes, you can use multiple transforms

    (Also, take a look at this:
    https://bennettfeely.com/clippy/)

    Here’s an example:

    div {
  height: 100px;
  width: 100px;
  background: #000;
  color: #fff;
  margin: 5em auto; /* Just to center it a bit */
  
/* Transform part */
  transform: scale(2) rotate(90deg);
}
    <div>Hello World</div>
    Login or Signup to reply.
  2. 0

    this may not be the answer you are looking for but you can do this too. CSS is capable of making all sorts of shapes.

     
       .my-bg-image {
         background: url("https://via.placeholder.com/728x90.png?text=Background-image+Backgground-image+Background-image") 0 0 / cover no-repeat;
    }
     .gol-bg {
         display: block;
         position: relative;
         width: 250px;
         height: 0px;
         border-left: 50px solid red;
         border-right: 50px solid red;
         border-bottom: 100px solid red;
         border-top: 100px solid red;
         position: relative;
      }
     .gol-bg:after {
         content: '';
         position: absolute;
         background: transparent linear-gradient(91deg, #02b3bc 0, #171c8f 100%) 0 0 no-repeat padding-box;
          width: 0;
          height: 0;
          border-left: 250px solid transparent;
          border-right: 100px solid transparent;
          border-bottom: 100px solid red;
          position: absolute;
          content: "";
          top: 0px;
          left: -50px;
    }
     .gol-bg .my-content {
         position: relative;
         z-index: 1;
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="bg-dark my-bg-image">
  <div class="row no-gutters">
    <div class="col-6">
      <div class="gol-bg">
        <div class="my-content">content</div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search