Pure CSS cut corner box test

Developer
Vincenzo
Size
2,981 Kb
Views
14,168
  1. Pure CSS cut corner box test Previews
  2. Pure CSS cut corner box test HTML Codes
  3. Pure CSS cut corner box test CSS Codes

How do I make an pure css cut corner box test?

Bordered box with cut corner and hover effect, PureCSS. What is a pure css cut corner box test? How do you make a pure css cut corner box test? This script and codes were developed by Vincenzo on 07 October 2022, Friday.

Pure CSS cut corner box test Previews
IQ Test

Pure CSS cut corner box test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS cut corner box test</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { padding: 0; margin: 0;
}
.test { position: relative; width: 269px; height: 90px; background: coral; margin: 20px;
}
.test:before { content: " "; position: absolute; bottom: 0px; right: 0px; width: 210px; height: 100%; background: #bbb;
}
.test:hover:before { background: inherit;
}
.test:after { content: " "; position: absolute; bottom: 0px; right: 0px; width: 0px; height: 0px; border: 15px solid black; border-color: transparent white white transparent;
}
.test .cover { position: absolute; width: 180px; height: 88px; top: 1px; background: white; right: 31px;
}
.test .cover:before { content: " "; position: absolute; top: 0px; right: -30px; width: 30px; height: 58px; background: white;
}
.test .cover:after { content: " "; position: absolute; bottom: 0px; right: -30px; width: 0px; height: 0px; border: 15px solid black; border-color: white transparent transparent white;
}
.test .eyelet { border-radius: 50%; background: white; border: 1px solid #bbb; width: 30px; height: 30px; position: absolute; top: 10px; right: 10px;
}
.test:hover .eyelet { background-color: inherit; border-color: transparent;
}
.test .attitle_container { position: absolute; left: 79px; right: 40px; width: 150px; height: 100%; top: 0; bottom: 0; display: inline-table;
}
.test .attitle { display: table-cell; width: 100%; height: 100%; vertical-align: middle; color: black; text-transform: uppercase;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="test"> <div class="cover">&nbsp;</div> <div class="eyelet">&nbsp;</div> <div class="attitle_container"> <div class="attitle"> A long multiline label </div> </div>
</div>
</body>
</html>

Pure CSS cut corner box test - Script Codes CSS Codes

* { padding: 0; margin: 0;
}
.test { position: relative; width: 269px; height: 90px; background: coral; margin: 20px;
}
.test:before { content: " "; position: absolute; bottom: 0px; right: 0px; width: 210px; height: 100%; background: #bbb;
}
.test:hover:before { background: inherit;
}
.test:after { content: " "; position: absolute; bottom: 0px; right: 0px; width: 0px; height: 0px; border: 15px solid black; border-color: transparent white white transparent;
}
.test .cover { position: absolute; width: 180px; height: 88px; top: 1px; background: white; right: 31px;
}
.test .cover:before { content: " "; position: absolute; top: 0px; right: -30px; width: 30px; height: 58px; background: white;
}
.test .cover:after { content: " "; position: absolute; bottom: 0px; right: -30px; width: 0px; height: 0px; border: 15px solid black; border-color: white transparent transparent white;
}
.test .eyelet { border-radius: 50%; background: white; border: 1px solid #bbb; width: 30px; height: 30px; position: absolute; top: 10px; right: 10px;
}
.test:hover .eyelet { background-color: inherit; border-color: transparent;
}
.test .attitle_container { position: absolute; left: 79px; right: 40px; width: 150px; height: 100%; top: 0; bottom: 0; display: inline-table;
}
.test .attitle { display: table-cell; width: 100%; height: 100%; vertical-align: middle; color: black; text-transform: uppercase;
}
Pure CSS cut corner box test - Script Codes
Pure CSS cut corner box test - Script Codes
Home Page Home
Developer Vincenzo
Username vncnz
Uploaded October 07, 2022
Rating 3
Size 2,981 Kb
Views 14,168
Do you need developer help for Pure CSS cut corner box test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vincenzo (vncnz) Script Codes
Name
Tintometer
Private Test
Square box with hover effect
Simple Date input with VueJS 2
AngularJS DateTimePicker concept
Elegant layout with elastic menu animation
Simple tags input with VueJS
Swiping Cards
Datetime-writer DEMO
Search text highlight example with material.angular
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!