简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 请问css怎样把一个container倾斜平分为两部分
ringa_lee
ringa_lee 2017-04-11 10:25:30
0
1
262

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

ringa_lee
ringa_lee

ringa_lee

全員に返信(1)
小葫芦
小葫芦2017-04-11 10:27:30 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下调试，代码精简。
效果图如下：

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！