javascript - 请问css怎样把一个container倾斜平分为两部分
ringa_lee
ringa_lee 2017-04-11 10:25:30
0
1
263

大概是这种样子,左右两张图片,鼠标有hover效果,不裁图的话用css怎么实现
我试过border旋转,但是超出容器高度,如果是画梯形,怎么把图片放上去
我试了这个问答--css如何让p变成直角梯形好像hover并不能正确区分两部分?
可以给我思路和方向,我去查资料,谢谢


ringa_lee
ringa_lee

ringa_lee

모든 응답(1)
小葫芦

用transform: skew可以做

dom结构如下:

<p class="pic1 pic">
    <img src="img/1.jpg" />
</p>
<p class="pic2 pic">
    <img src="img/2.jpg" />
</p>

核心是让父元素skew一个角度,再让img skew回来。

.pic{
        transform:skew(50deg,0deg);
     }
.pic img{
        transform: skew(-50deg,0deg);
    }

然后利用padding对img进行移动,找好位置。

所有代码如下:

<style type="text/css">
    *{
        margin:0;
        padding:0;
        box-sizing: border-box;
    }
    body{
        padding-top: 100px;
        padding-left: 100px;
    }
    .pic{
        /*设置border让你看清变化*/
        border: 1px solid red;
        width: 200px;
        height: 300px;
        display: inline-block;
        overflow:hidden;
        transform:skew(50deg,0deg);
    }
    .pic1{
    }
    .pic2{
        /*设置-8让两个inline-block无缝隙*/
        margin-left: -8px;
    }
    .pic img{
        width:200px;
        height:300px;
        transform: skew(-50deg,0deg);
    }
    .pic1 img{
        padding-left: 177px;
        width: 380px;
        padding-top: 150px;
    }
    .pic2 img{
        padding-top: 150px;
    }
</style>

<body>
<p class="pic1 pic">
    <img src="img/1.jpg" />
</p>
<p class="pic2 pic">
    <img src="img/2.jpg" />
</p>
</body>

说明一下

我只在chrome下调试,代码精简。
效果图如下:

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!