Question

example picture : is it even possible? 大家好。我真的坚持这个问题：有：4个带有图标的链接。（如菜单）需要：将它们全部放入形状。哪一个在缩放时是自适应的，并且不会让内容变形。尝试过（已经尝试了2个星期）：css生成器，旋转，编译矩形和三角形，伪元素“：after”。但是结果什么都没有。 ps。我是唯一的初学者，对于像我这样的专家来说，这可能是显而易见的，这就是我要问的原因。

我的代码

 .item{
    text-align: center;
    margin-left: 12%;
    transform:  scaleY(-1);
}
.linkiconsize img{
    height: 50px;
}


/*ICON BG SHAPES */
.trapezoid {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 50%;
    top: 12%;
    border-top: 0 solid;
    border-right: 35px solid rgba(0,0,0,0);
    border-bottom: 61px solid black; /* white required */
    border-left: 0 solid rgba(0,0,0,0);
    color: rgba(0,0,0,0);
    -o-text-overflow: clip;
    text-overflow: clip;
    -webkit-transform:  scaleY(-1);
    transform:  scaleY(-1);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
            <!-- bootstrap -->
        
            <div class="wrapperpos trapezoid">
             <div class="container-fluid">
                <div class="row no-gutters align-items-center item">
                    <div class="col-6 col-md-2">
        
                        <a href="#">
        
                            <div class="linkiconsize">
                                <img src="img/wdep.png"/>
                            </div>
        
                            <span class="">
                        Web development
                    </span>
        
                        </a>
        
                    </div><!-- web dev -->
        
                    <div class="col-6 col-md-2">
        
                        <a href="#">
        
                            <div class="linkiconsize">
                                <img src="img/app.png"/>
                            </div>
        
                            <span>
                        Mobile applications
                    </span>
        
                        </a>
        
                    </div><!--mobile applications-->
        
                    <div class="col-6 col-md-2">
        
                        <a href="#">
        
                            <div class="linkiconsize">
                                <img src="img/seng.png"/>
                            </div>
        
                            <span>
                        Service engineering
                    </span>
                        </a>
        
                    </div><!--service-->
        
                    <div class="col-6 col-md-2">
        
                        <a href="#">
        
                            <div class="linkiconsize">
                                <img src="img/bsn.png"/>
                            </div>
        
                            <span>Business analysis and audit</span>
                        </a>
        
                    </div><!--business-->
        
                </div><!-- row with no gutters + link's positions-->
                    </div><!--container -->
                    </div> <!--wrapper-->

Answer 1

您可以使用skew()转换来达到此目的。有关skew()用于创建各种形状的可能用法，请参见本指南。 https://css-tricks.com/examples/ShapesOfCSS/

如果您查看“平行四边形”和“雪佛龙”示例，则可以看到该变换如何允许您创建所需的切角。

为此，您可能希望在创建.trapezoid:after声明并将skew()应用于它的同时，包含元素仍为正方形。

CSS中的几何形状，充满了内容

1 个答案: