Bend a Div with CSS

How to bend a div in CSS

A similar effect can be achieved using two divs and CSS:

https://codepen.io/anon/pen/RgJQgN

#c {

  height: 110px;

  overflow: hidden;

}

#b {

  height: 150px;

  width: 150px;

  border: 30px solid blue;

  border-radius: 50%;

  margin-top: -50px;

  margin-left: -150px;

}

<div id="c">

  <div id="b"></div>

</div>

Bend a div with CSS

Currently, this is not possible with CSS alone. Your best bet would be to make use of the canvas (and some Javascript).

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

http://www.roblaplaca.com/examples/bezierBuilder/

how to bend border's of a div

Using border-radius And You can Change border-radius: px

div {

  height: 100px;

  width: 100px;

  background: #000;

  border-radius: 25px;

}

<div></div>

how to create a curve in the middle of a div border in css?

You'll need a second element with settings similar to the snippet below.

Important details:

• The border radiuses

• The relative/absolute position combination of both elements, with the half-circle (absolute position) being the child of the rectangle

• The left and transform settings of the half-circle for the horizontal position in the center

• The top: -1px setting for the half-circle for the vertical position and to cover the border of the rectangle and the white background to really cover it.

• and everything else ;-)

.container {

  width: 100%;

  height: 300px;

  border: 1px solid orange;

  position: relative;

}

.half-circle {

  width: 200px;

  height: 100px;

  position: absolute;

  left: 50%;

  top: -1px;

  transform: translateX(-50%);

  border-bottom: 1px solid orange;

  border-left: 1px solid orange;

  border-right: 1px solid orange;

  border-bottom-left-radius: 100px;

  border-bottom-right-radius: 100px;

  background: #fff;

}

<div class="container">

  <div class="half-circle"></div>

</div>

How to create a curve as shown below for the div

You can make the element to overflow by adding negative values to left/right. then add some padding to avoid content overflow like this :

.container {

  width: 200px;

  border: 1px solid blue;

  height: 200px;

  margin: 0 auto;

  overflow: hidden;

  position: relative;

}

.count-select {

  box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, .8);

  border-top: 2px solid #E75532;

  height: 50px;

  background: #fff;

  position: absolute;

  bottom: 0;

  left: -30px;

  right: -30px;

  padding: 12px 30px;

  border-radius: 50%;

  text-align:center;

}

<div class="container">

  <div class="count-select ">

    select items

  </div>

</div>

Curve bottom side of the div to the inside with CSS

Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:

.container {

  margin: 0 auto;

  width: 500px;

  height: 200px;

  background: lightblue;

  position: relative;

  overflow: hidden;

}

.container:after {

  content: "";

  position: absolute;

  height: 80px;

  left: -10%;

  right: -10%;

  border-radius: 50%;

  bottom: -25px;

  background: #fff;

}

<div class="container">

</div>

Can I create a div with a Curved bottom?

CSS:

div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

see is this ok for you

div {
  background-color: black;
  width: 500px;
  height: 50px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div>
</div>

Creating a curved div using only CSS

I stumbled across an interesting article in CSS Tricks. I don't think there's a way to do what you want with a complex div, but if you just wanted banner text. This is not a perfect answer, but I think it's the closest you might get. It's really just an illusion of a manipulated div, not the actual thing.

But anyway... I managed to tweak their code a bit like this:

.badge {

  position: relative;

  width: 400px;

  border-radius: 50%;

  transform: rotate(-50deg);

}

h1 span {

background-color: lightblue;

  font: 26px Monaco, MonoSpace;

  height: 40px;

  position: absolute;

  width: 20px;

  left: 0;

  top: 0;

  transform-origin: center 190px;

}

.char1 {

  transform: rotate(6deg);

}

.char2 {

  transform: rotate(12deg);

}

.char3 {

  transform: rotate(18deg);

}

.char4 {

  transform: rotate(24deg);

}

.char5 {

  transform: rotate(30deg);

}

.char6 {

  transform: rotate(36deg);

}

.char7 {

  transform: rotate(42deg);

}

.char8 {

  transform: rotate(48deg);

}

.char9 {

  transform: rotate(54deg);

}

.char10 {

  transform: rotate(60deg);

}

.char11 {

  transform: rotate(66deg);

}

.char12 {

  transform: rotate(72deg);

}

.char13 {

  transform: rotate(78deg);

}

.char14 {

  transform: rotate(84deg);

}

.char15 {

  transform: rotate(90deg);

}

.char16 {

  transform: rotate(96deg);

}

.char17 {

  transform: rotate(102deg);

}

.char18 {

  transform: rotate(108deg);

}

.char19 {

  transform: rotate(114deg);

}

.char20 {

  transform: rotate(120deg);

}

.char21 {

  transform: rotate(126deg);

}

.char22 {

  transform: rotate(132deg);

}

.char23 {

  transform: rotate(138deg);

}

.char24 {

  transform: rotate(144deg);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="page-wrap">

  

  <div class="badge">

    <h1>

        <span class="char1">E</span>

        <span class="char2">s</span>

        <span class="char3">t</span>

        <span class="char4">a</span>

        <span class="char5">b</span>

        <span class="char6">l</span>

        <span class="char7">i</span>

        <span class="char8">s</span>

        <span class="char9">h</span>

        <span class="char10">e</span>

        <span class="char11">d</span>

        <span class="char12"> </span>

        <span class="char13">2</span>

        <span class="char14">0</span>

        <span class="char15">1</span>

        <span class="char16">2</span>

      </h1>

  </div>

 

 </div>

How to bend the border of a link only at the end of the link

Percentual border radius depends on height/width (20% of height from left to top; 20% of width from top to left).

You can use non-percentual value (like rem or px)

.something {
  border: 3px solid #f354f3;
  padding: 1rem 2rem;
  border-radius: 1rem;
}

<div class="something">some text in my element</div>

---

Related Topics