Is it possible to bend a div with CSS?

Question

0.00/5 (No votes)

See more:

, +

Is it possible to bend a div with CSS?

Some sort of webkit transform...

The effect i want to create is a have a ring doughnut shape but made up of a curved div as opposed to border-radius/border tricks
Please Help
Regards
yarian

What I have tried:

The effect i want to create is a have a ring doughnut shape but made up of a curved div as opposed to border-radius/border tricks

Note 1 : I mean cutting corners is not handling
A straight line Suppose you want to change the convex shape

Iam Trying Find This Site (http://www.roblaplaca.com/examples/bezierBuilder/) But Not Working

<style type="text/css">
.C{
-webkit-transition: all 1s cubic-bezier(-.01, .85, .57, 1.01);
-moz-transition: all 1s cubic-bezier(-.01, .85, .57, 1.01);
transition: all 1s cubic-bezier(-.01, .85, .57, 1.01);
}
</style>
<img src="Images/Test.png" class="C" />

Posted 17-Aug-16 18:50pm

yarian misaq

Updated 17-Aug-16 20:38pm

v4

Add a Solution

Comments

Beginner Luck 18-Aug-16 1:35am

yes

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Beginner Luck · Answer 1 · 2016-08-17T19:36:00

Solution 1

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

</head>
<body>

Rounded corners for an element with a border:

Rounded corners!

is CSS3 so i not sure about ie browser

Posted 17-Aug-16 19:36pm

Beginner Luck

Comments

yarian misaq 18-Aug-16 1:39am

I mean cutting corners is not handling
A straight line Suppose you want to change the convex shape

Beginner Luck 18-Aug-16 1:46am

what you really want to do with it. So i can tell what you really need. can show image you want to do??

Nethaji chennai · Answer 2 · 2016-08-17T19:58:00

Solution 2

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/

Posted 17-Aug-16 19:58pm

Nethaji chennai

Comments

yarian misaq 18-Aug-16 2:13am

Hello When To Try Do It Iam Find This Site Thank You For Help Me
But Iam Can't Use This And Not Working For Example

<style type="text/css">
.C{
-webkit-transition: all 1s cubic-bezier(-.01, .85, .57, 1.01);
-moz-transition: all 1s cubic-bezier(-.01, .85, .57, 1.01);
transition: all 1s cubic-bezier(-.01, .85, .57, 1.01);
}
</style>
<img src="Images/Test.png" class="C" />
<br /><br /><br /><br /><br /><br />
<div style="height:400px;width:50px;background-color:#ff0000;" class="C">

</div>
<br /><br /><br /><br /><br /><br />
<div style="height:50px;width:400px;background-color:#ff0000;" class="C">

</div>

Tanmoy banerjee · Answer 3 · 2016-08-17T20:38:00

Solution 3

You have to use the polygon function

C#

.container{
    width:445px;
    height:670px;
    overflow:hidden;
    margin:30px auto;
    shape-outside: polygon(170.67px 291.00px,126.23px 347.56px,139.79px 417.11px,208.92px 466.22px,302.50px 482.97px,343.67px 474.47px,446.33px 452.00px,443.63px 246.82px,389.92px 245.63px,336.50px 235.26px,299.67px 196.53px,259.33px 209.53px,217.00px 254.76px);
}

Posted 17-Aug-16 20:38pm

Tanmoy banerjee

Comments

yarian misaq 18-Aug-16 3:09am

Yet Test This Code But Not Working

Tanmoy banerjee 18-Aug-16 4:30am

Read this https://www.w3.org/TR/css-shapes/