how to make an oval in css?
All you have to do is to change border-radius: 40px to border-radius: 50%. .oval { width: 160px; height: 80px; background: #a84909; border-radius: 50%; } <div class=”oval”></div>
css-shapes
Filling water animation
Here are four different versions to supplement @misterManSam’s brilliant answer. 1. With Easing Explanation If you filled up a circular bowl full of liquid, it would fill faster at the bottom and top than it would in the middle (because there is more area to cover in the wider middle section). So, with that crude … Read more
Add outward curving border to elements like this: ◝◟___◞◜
From the top of my head: draw bottom half border on the element and draw top-left and top-right borders on positioned pseudo elements. /* using 4px border, 1em border radius, 1em padding */ nav ul { font: medium sans-serif; text-align: center; padding: 0; list-style-type: none; border-top: 4px solid; } nav li { display: inline-block; border-left: … Read more
Border within border CSS
When the main triangle or arrow is itself created using the CSS borders, it is impossible to add another border to it without using extra elements. The below are a few options. Option 1: Using a bigger size pseudo-element and positioning it behind the parent to produce a border-effect. .arrow-down { position: relative; width: 0; … Read more
How can I make a 45 degree responsive ribbon with folded corner?
You can try like below: .container { width: 200px; height: 150px; position: relative; display:inline-block; margin: 10px; background: lightblue; } .stack-top { /* adjust the below to control the shape */ –d:5px; –g:16px; –c:#333; /**/ position: absolute; top: 0; right: 0; transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 – cos(45deg)) */ color: #fff; text-align: center; … Read more
Adjacent divs with angled borders? [duplicate]
Try this .left, .right { position: relative; height: 100px; width: 200px; background: #000; float: left; } .left:after { content: ”; line-height: 0; font-size: 0; width: 0; height: 0; border-top: 100px solid #000; border-bottom: 50px solid transparent; border-left: 0px solid transparent; border-right: 50px solid transparent; position: absolute; top: 0; right: -50px; } .right { margin-left: 60px; … Read more
CSS box shadow around a custom shape?
Use drop-shadow: maybe this article (box-shadow-vs-filter-drop-shadow) will help you
Make CSS3 triangle with linear gradient
So I know that you want to do this with CSS, but I always do this in SVG: <svg width=”100%” height=”100%” version=”1.1″ xmlns=”http://www.w3.org/2000/svg”> <defs> <linearGradient id=”fill” x1=”0%” y1=”0%” x2=”0%” y2=”100%”> <stop offset=”0%” style=”stop-color:rgb(224,224,224);stop-opacity:1″/> <stop offset=”100%” style=”stop-color:rgb(153,153,153);stop-opacity:1″/> </linearGradient> </defs> <path d=”M 0 0 L 64 0 L 32 64 z” stroke=”colourname” fill=”url(#fill)”/> </svg> You can embed … Read more
Title with bottom border smaller than width
You could use a pseudo-element for this. (example) .pseudo_border { position:relative; display:inline-block; } .pseudo_border:after { content:”; position:absolute; left:0; right:0; top:100%; margin:10px auto; width:50%; height:6px; background:#00f; } Just absolutely position a pseudo-element relative to the parent element. Position it 100% from the top and use a combination of left:0; right:0 and a margin of auto for … Read more
Creating a ‘New’ spiky label with 24 or above point burst
With svg it is possible with a simple loop. I am using Snap as it makes it simple. First of all create a circle using snap then using a loop find the points we need from the circle i referenced this question for finding the points. After finding the points simply give the lines these … Read more