Creating a curved div using only CSS

Question

Is there any way to create a div that's warped, bent, curved, transformed, etc. to look like the following image? The only thing I've been able to find is manipulating a single border using border-radius, but what I really need is to transform an actual div element with only CSS.

(Edit: As comments have pointed out: Yes there are tons of solutions that use borders, draw to the canvas, etc. But this question is specifically about manipulating a div element using CSS)

The unanswered Reddit thread where I got the image from.

do you have any code you tried to share before being downvoted or closed ? — G-Cyrillus
– G-Cyrillus, Commented Aug 11, 2017 at 18:41
A general answer to this question would be great as a reference for anyone to use. But just to tack on as a bonus: I'm specifically trying to create a thick, curved line with rounded corners (so imagine the div from the image with rounded corners). Can't find a good solution that isn't hacky and unscalable ): — mintychai
– mintychai, Commented Aug 11, 2017 at 18:41
I don't see why this would be closed... Pretty well explained despite no code... I don't think code would be helpful if @mintychai never even go close to anything... — Don
– Don, Commented Aug 11, 2017 at 18:43
best thing you can do before posting a question is to try to solve it yourself, in other words: stackoverflow.com/help/mcve, and then ask the question — AGE
– AGE, Commented Aug 11, 2017 at 18:46
@mintychai To be frank, the answer to your question is: you should do this with SVG elements. Everything else will be an approximation/hack. — TylerH
– TylerH, Commented Aug 11, 2017 at 18:51

Muhammad · Accepted Answer · 2017-08-11 19:26:41Z

4

.ribbon{
  width: 200px;
  height: 200px;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid #d69688;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

<div class='ribbon'></div>

edited Aug 11, 2017 at 19:26

answered Aug 11, 2017 at 19:13

Muhammad

7,4245 gold badges50 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Don · Accepted Answer · 2017-08-11 18:59:59Z

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>

You have to split up the word into separate letter <span> elements with specific class names. This is tedious but the article gives some javascript to simplify the breaking up of the word but you said only CSS, so...

As others have said in the comments (though it's not what you're asking for). SVG will likely accomplish this much better.

Thanks! Especially for actually answering the question-- that "no," it's probably impossible to do what's asked in the question. This is definitely an interesting trick though and I'm messing around with it to get the geometry to all work out for what I'm doing. For anyone that stumbles across this: you'll basically have to create wrappers and transform the content you want inside the div so that it APPEARS to be curved in the div.
Exactly playing with the transform-origin you can get some interesting results.

Collectives™ on Stack Overflow

Creating a curved div using only CSS

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related