Question 305358 in Html Question posted in
Some basic documentation can be found here.

Html – How would you make this background using css?

enter image description here

I’m trying to achieve this. I cant add top right corner border radius.

.curve {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  border-bottom: 165px solid #2d2d2d;
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  border-radius: 15px;
  border-top-right-radius: 15px;
  width: 100%;
  z-index: 1;
}
<div class="curve"></div>
Tags:

2

Answers


  1. 0

    You can try this:

    .curve {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  border-bottom: 165px solid #2d2d2d;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-radius: 15px;
  border-top-right-radius: 15px;
  width: 100%;
  z-index: 1;
}
    Login or Signup to reply.
  2. 0

    I add sample code below.

    .trapezoid {
  margin: 30px;
  width: 200px;
  height: 200px;
  background-color: #3498db;
  border-radius: 20px;
  transform: perspective(100px) rotateX(6deg) skewX(5deg);
}
    <div class="trapezoid"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search