问题
Is there any way to prevent clip-path from clipping its children? For example, consider the following code:
.el {
width: 300px;
height: 300px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: orangered;
}
h1 {
position: relative;
z-index: 100;
}<div class="el">
<h1>Work Hard, Play Hard</h1>
</div>Codepen
回答1:
why won't you keep the h1 tag outside the div tag to make it visible
<!DOCTYPE html>
<html>
<head>
<style>
.el {
width: 300px;
height: 300px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: orangered;
position: absolute;
z-index: 1;
}
h1 {
position: fixed;
z-index: 999;
}
</style>
</head>
<body>
<div class="el">
</div>
<h1>Work Hard, Play Hard</h1>
</body>
<script>
</script>
</html>来源：https://stackoverflow.com/questions/44154783/prevent-css-clip-path-from-clipping-children