Create a bell shape with CSS
Have a look at this one,
jsFiddle DEMO
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
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"
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
Sorting CSS Properties into an Arbitrary Order
Symfony2 - Formbuilder - Add a Class to The Field and Input
How to Edit CSS in Chrome Like in Firebug for Firefox
CSS Background-Position Animate Right to Left
Browser-Specific Prefixes with a CSS Transition on Transform
How to Break Long Words in a Table Td
Bootstrap 4 Vertical Align Text Won't Center on Card
Bootstrap Container with Position:Absolute Loses Layout Inside
Why Doesn't CSS Hover Work on Table Rows When The Cells Inside The Rows Have Class Names
How to Override Scoped Styles in Vue Components
Styling Overlapping Annotations in Text with HTML <Span> Tags and CSS
How to Use SASS to Properly Avoid Embedding Twitter Bootstrap Class Names on HTML