CODEWITHSUNDEEP
css
mintychai
mintychai

Reputation: 311

Creating a curved div using only CSS

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.

Upvotes: 7

Views: 8938

Answers (2)

Muhammad
Muhammad

Reputation: 7344

.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>

Upvotes: 4

Don
Don

Reputation: 4167

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.

Upvotes: 1

Related Questions