Create a Bell Shape with CSS

Create a bell shape with CSS

Have a look at this one,

jsFiddle DEMO

result shape

css

  #bell {
left:300px;
top:20px;
position: relative;
}
#bell:before, #bell:after {
position: absolute;
line-height:0;
content:"\2315";
color:#d3d3d3;
font-size:100pt;
text-indent:30px;
top: 0;
width: 180px;
height:300px;
background: #d3d3d3;
}
#bell:before {
left: 50px;
border-radius: 150px 150px 20px 30px;
-webkit-transform: rotate(15deg);
-webkit-transform-origin: 0 0;
transform: rotate(15deg);
transform-origin: 0 0;
background: radial-gradient(-50px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
background: -webkit-radial-gradient(-50px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
}
#bell:after {
left: 0;
-webkit-transform: rotate(-15deg);
-webkit-transform-origin:100% 0;
transform: rotate(-15deg);
transform-origin:100% 0;
border-radius: 150px 150px 30px 20px;
background: radial-gradient(230px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
background: -webkit-radial-gradient(230px 250px, 300px 1200px, transparent 20%, #d3d3d3 20%);
line-height:550px;
content:"\25CF";
color:#d3d3d3;
font-size:130pt;
text-indent:-15px;
}

ya its not exactly same as in the question, but came close.

EDITED

jsFiddle DEMO

Sample Image

Css Bordered Triangle

This can be achieved with SVG which is probably your best alternative.

<svg width="150px" height="100px" viewbox="0 0 10 10" preserveAspectRatio="none">  <path d="M5,0 Q8,3 8,8 Q5,10 2,8 Q2,3 5,0" fill="skyblue"></path></svg>

PHP + CSS + Lettering.js Creating curved text

You can use the Gaussian function to create a curve resembling a "bell curve"

Sample Image

I'm setting up a, b, c like so:

a = 1/(1.0*(Math.sqrt(2*Math.PI))) // height of the curve's peak ( 1/(σ√(2π)) )
b = letterCount / 2 // position of the center, b = μ (expected value)
c = 1.0 // width of the "bell", c = σ (variance)

then iterating over the span elements and getting the top "bellPosition" like so

bellPosition = (a*Math.E)-(Math.pow(x-b, 2)/Math.pow(2*c, 2))

you can play with this (especially c to change the variance in the curve)

this example jsfiddle uses javascript to apply the top styles to the span elements, should be easy enough to translate to PHP.

How to achieve this oval layout with CSS

You can try this: https://jsfiddle.net/dqhx5cf5/

HTML:

<div class="rectangle"><div class="circle"></div></div>

CSS:

.rectangle{
background-color: darkblue;
width: 300px;
height: 500px;
overflow:hidden;
}

.circle{
border-radius: 50%;
width: 600px;
height: 600px;
background-color: #ddd;
position:relative;
left: -150px;
top: 100px;
border: 2px dashed darkblue;
box-shadow: 0 0 0px 5px #ddd;
}

BUT with Firefox the curved line does not appear dashed because is not compatible with mozilla, but if you check it from IE and Chrome it works as well.

Creating s-shaped curve using css

SVG

As Harry suggested in the comments, SVG would be your best option as a double curve in CSS isn't feasible without using multiple elements, pseudo elements or using possibly unsupported CSS3 properties.

SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.

It is well supported across all browsers as viewable here: CanIUse

<svg width="466" height="603" viewbox="0 0 100 100" preserveAspectRatio="none">  <path d="M0,0            L100,0           C25,50 50,75 0,100z" fill="#8aa7ca" /></svg>


Related Topics



Leave a reply



Submit