Question

我想要一个带有三个按钮的导航栏。按钮应在两个内边缘上具有倾斜边缘。为此我使用transform: skewX(-25deg);。这导致三个平行四边形;不好。没问题，我会让三个平行四边形比窗口宽，然后将它们包含在div中，居中，并在父div上使用overflow: hidden;。

这适用于Chrome和Firefox，但不适用于Safari。似乎Safari强制子div缩小到父div的宽度，留下三个平行四边形。

为了演示，三个按钮是蓝色，孩子的背景是黄色。黄色不应该是可见的。任何帮助在Safari中完成这项工作都将不胜感激。

<html>   
<body>     
    <div id="parent">  
        <div id="child">
            <div class="slantButton">Button 1</div>
            <div class="slantButton">Button 2</div>
            <div class="slantButton">Button 3</div>
        </div>
    </div>
</body>

<style>  
    #parent {
        display: flex;
        justify-content: center;
        height: 15vw;
        width: 100vw;
        overflow: hidden;
    }

    #child {
        height: 100%;
        display: flex;
        flex-direction: row;
        width: 120vw; 
        background-color: yellow;
    }

    .slantButton {
        transform: skewX(-25deg);
        width: 40vw;
        background-color: blue;
        border: 2px solid white;
    }   
</style>  
</html>

创建一个div，其中包含比其父级更宽的倾斜按钮

0 个答案: