HTML : How to make a curve like this using HTML &

问题:

<div style="position:absolute; color:#E0922F; border-style:solid; height:140px; width:360px; "></div>

Please teach me how to make a curve middle of straight like using css

回答1:

You can try like this

.red-box{
  border:3px solid #E0922F;
  display:block;
  width:360px;
  height:140px;
  position:relative;
}
div.left {
  border: 3px solid #E0922F;
  display: inline-block;
  position:absolute;
  right:-3px;
  top:50px;
  border-right:3px solid #fff;
  background:#fff;
}
.left {
  height: 40px;
  width: 20px;
}


.left {
  border-bottom-left-radius: 90px;
  border-top-left-radius: 90px;
}

<div class="red-box">
  <div class="left"></div>
</div>

回答2:

Here is another way with only one element and less of code:

.box{
  border:3px solid #E0922F;
  border-right:none;
  background:
    linear-gradient(#E0922F,#E0922F) right bottom/3px calc(50% - 24px) no-repeat,
    linear-gradient(#E0922F,#E0922F) right top/3px calc(50% - 24px) no-repeat,
    radial-gradient(circle at right,transparent 50%,#E0922F 50%,#E0922F calc(50% + 3px), transparent calc(50% + 4px)) right center/40px 55px no-repeat;

  width:360px;
  height:140px;

}

<div class="box">
  
</div>

回答3:

You can use absolutely positioned CSS Pseudo Elements like :after with border-radius and transform to generally create this effect.

For an html element with a class of "container":

.container {
  position:relative;
  width:360px;
  height:140px;
  border:solid 4px #E0922F;
  background:#fff;
}
.container:after {
  content:'';
  position:absolute;
  top:50%;
  right:0;
  width:42px;
  height:42px;
  border:solid 4px;
  border-color:transparent transparent #E0922F #E0922F;
  border-radius:50%;
  background:#fff;
  transform:translateX(calc(50% + 4px)) translateY(-50%) rotate(45deg);
}

<div class="container"></div>

Create an :after pseudo element which has a width and height and is absolutely positioned relative to .container.

Give it a border thickness and offset your x value by the same amount with translateX(calc(50% + 4px)). This says, move the element a distance of 50% of its width along the X-axis and add the border thickness to this calculated position.

Move it down to the middle of the container element with top:50% and center it with translateY(-50%).

Give it a border-radius of 50% to curve the corners and set each quadrant's individual colour with border-color:transparent transparent #fc0 #fc0.

Rotate the element by 45 degrees to position the visible border quadrants' corners relative to the right edge of the container element with rotate(45deg).

The main drawback to this approach is the pseudo element has to have a background colour to hide the container below it. This CodePen shows a working example. If you uncomment the body background colour you can see this drawback.

But if you don't try to be too fancy and keep the background colours consistent, this looks to emulate the effect you are looking for.

Note: you can also offset the border thickness by using right:-4px; and translateX(50%) if you don't want to muddy up your transform with calc(). Either approach achieves the same positioning.