问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问css怎样把一个container倾斜平分为两部分

头像
弱鸡
    25142236

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

    图片描述

    htmlcssjavascript
    阅读 4.1k
    1 个回答
    得票最新
    头像
    reclay
      195510
      ✓ 已被采纳

      用transform: skew可以做

      dom结构如下：

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

      核心是让父元素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>
<div class="pic1 pic">
    <img src="img/1.jpg" />
</div>
<div class="pic2 pic">
    <img src="img/2.jpg" />
</div>
</body>

      说明一下

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

      clipboard.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题