All geek questions in one place

Flat sharp angled or beveled corners

Is there a way to create a sharp flat corner with CSS and HTML?

Something like that:

____ / \ | | \____/
+6
source share
5 answers

Here is my solution using CSS forms from Chris Coyer.

http://jsfiddle.net/dDejan/XSs9L/

4 additional divs are inserted via JavaScript (well, in fact, jQuery) for each of your containers that you want to form in this way. These divs are located absolutely in the corners of this parent, and they are decorated accordingly, as described in the link posted by Sven Bieder

+10
source

Look at here. There you will find everything you need:

http://css-tricks.com/examples/ShapesOfCSS/

Change In case of loss of connection:

CSS

 #octagon { width: 100px; height: 100px; background: red; position: relative; } #octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
+21
source

You can create this using absolutely positioned elements :before and :after , using CSS triangles .

 <div class="box"></div>

CSS

 .box { background-color:#2020ff; height:50px; width:50px; position:relative } .box:after { content:" "; width: 0; height: 0; border-top: 10px solid #ffffff; border-bottom: 10px solid transparent; border-right:10px solid #ffffff; position:absolute; top:-9px; right:0px; }
+3
source 

 box { background-color: transparent; position: fixed; width: 300px; height: 300px; } svg { width: 300px; height: 300px; } polygon { visibility: visible; background: black; stroke: white; } 
 <box> <svg> <polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" /> </svg> </box>
+1
source 

 .rotate { margin: 100px; background-color: olivedrab; width: 100px; height: 100px; transform: rotate(45deg); } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="rotate"></div> </body> </html>
0
source

Source: https://habr.com/ru/post/917380/

More articles:


All Articles