CSS 3六角形
2408 ワード
<!DOCTYPE html>
<!-- saved from url=(0043)http://dbox.whosemind.net/demo/liufang.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Document</title>
<style>
.avatar {
width: 100px;
height: 86px;
position: relative;
overflow:hidden;
}
.avatar1:before {
content: "";
position: absolute;
top: 0px;
right: 0;
width: 50%;
border-bottom: 43px solid transparent;
border-left: 25px solid white;
border-right: 25px solid white;
}
.avatar1:after {
content: "";
position: absolute;
bottom: 0px;
width: 50%;
right: 0;
border-top: 43px solid transparent;
border-left: 25px solid white;
border-right: 25px solid white;
}
.avatar img{
width: 100%;
height: 100%;
}
.avatar2:before {
content: "";
position: absolute;
top: 0px;
right: 0;
border-bottom: 29px solid transparent;
border-left: 50px solid white;
border-right: 50px solid white;
}
.avatar2 {
height: 116px;
}
.avatar2:after {
content: "";
position: absolute;
bottom: 0px;
right: 0;
border-top: 29px solid transparent;
border-left: 50px solid white;
border-right: 50px solid white;
}
.avatar3{
height: 116px;
transform: rotate(120deg);
}
.avatar3-inner{
overflow: hidden;
width: 100%;
height: 100%;
transform: rotate(-60deg);
}
.avatar3 img{
transform: rotate(-60deg);
}
.avatar4{
height: 90px;
}
</style>
</head>
<body>
<div class="avatar1 avatar">
<img src="./Document_files/wallhaven-131731.jpg">
</div>
<div class="avatar2 avatar">
<img src="./Document_files/wallhaven-131731.jpg">
</div>
<div class="avatar3 avatar">
<div class="avatar3-inner">
<img src="./Document_files/wallhaven-131731.jpg">
</div>
</div>
<div class="avatar3 avatar avatar4">
<div class="avatar3-inner">
<img src="./Document_files/wallhaven-131731.jpg">
</div>
</div>
<script>
</script>
</body></html>