?> 背景知识：:point_right: transform, clip-path
<script v-pre type="text/x-template" id="parallelogram"> <style> main{ width: 100%; padding: 29px 0 0; } .diamond{ display: flex; flex-wrap: wrap; justify-content: space-around; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee; } .diamond > div{ width: 150px; color: white; display: inherit; justify-content: center; align-items: center; position: relative; } .diamond:nth-of-type(1) > div{ transform: skewX(-45deg); background: #b4a078; } .diamond:nth-of-type(1) > div > span{ transform: skewX(45deg); } .diamond:nth-of-type(2) > div::before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; transform: skewX(-45deg); background: #b4a078; } .diamond:nth-of-type(3) > div{ width: 105px; height: 105px; border: 29px solid transparent; box-sizing: content-box; } .diamond:nth-of-type(3) > div::before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; background: #b4a078; transform: rotate(45deg); } .diamond:nth-of-type(3){ margin-bottom: 0; align-items: center; justify-content: space-around; border-bottom-color: transparent; } .diamond:nth-of-type(3) > img{ width: 300px; height: 150px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: 1s clip-path; } .diamond:nth-of-type(3) > img:hover{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } </style>① 嵌套元素
diamond
② 伪元素(推荐)
diamond
diamond
