时间戳

首页 > 解决方案 > css中的几何形状，充满了内容

html - css中的几何形状，充满了内容

问题描述

示例图片：甚至可能吗？ 大家好。我真的遇到了这个问题：有：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-->

标签： htmlcss

解决方案

您可以使用skew()转换来实现这一点。skew()有关创建各种形状的可能用途，请参阅本指南。https://css-tricks.com/examples/ShapesOfCSS/

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

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

推荐阅读