Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { height: 300px; background: yellow; position: relative; } div:before { content: ''; position: absolute; top: 0; right: 0; border-top: 80px solid white; border-left: 80px solid yellow; width: 0; } </style> </head> <body> <div>We can create a cut corner effect with the help of CSS pseudo-elements, in the case where the parent element has a solid color background.</div> </body> </html>