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

Half circle with CSS (border, outline only)

You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box’s height (and added borders). Then add a border to top/right/left sides of the box to achieve the effect. Here you go: .half-circle { width: 200px; height: 100px; /* as the half of the width */ background-color: gold; … Read more

Slanted Corner on CSS box [duplicate]

Descriptions Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) supports old browsers. For CSS3-specific, try CSS polygons: https://alastairc.uk/2007/02/dissecting-css-polygons/. Code The HTML: <div class=”cornered”></div> <div class=”main”>Hello</div> The CSS: .cornered { width: 160px; height: 0px; border-bottom: 40px solid red; border-right: 40px solid white; } .main { width: 200px; height: 200px; background-color: red; } The result: http://jsfiddle.net/mdQzH/ Alternative Code To use transparent borders and … Read more