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

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

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=””> <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