43 lines
1.0 KiB
HTML
43 lines
1.0 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
#grad {
|
|
position: absolute;
|
|
background: -webkit-linear-gradient(45deg, blue 0% 25%, green 25% 50%, orange 100px 75%, lime 150px);
|
|
}
|
|
|
|
.x1 {
|
|
position: absolute;
|
|
-webkit-clip-path: polygon(0% 45%,55% 100%,45% 100%,0% 55%);
|
|
}
|
|
#x1 {
|
|
background-color:black;
|
|
}
|
|
.x2 {
|
|
position: absolute;
|
|
-webkit-clip-path: polygon(0% 0%, 5% 0%, 100% 95%, 100% 100%, 95% 100%,0% 5%);
|
|
}
|
|
#x2 {
|
|
background-color:black;
|
|
}
|
|
.x3 {
|
|
position: absolute;
|
|
-webkit-clip-path: polygon(55% 0%, 100% 45%, 100% 55%,45% 0%);
|
|
}
|
|
#x3 {
|
|
background-color:black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="grad"></div>
|
|
<div id="x1" class="x1"></div>
|
|
<div id="x2" class="x2"></div>
|
|
<div id="x3" class="x3"></div>
|
|
</body>
|
|
</html>
|