Home / Questions / 111533
Accepted
Antonio Ángel Estrada Pérez
Asked: 2020-10-24 02:16:37 +0800 CST 2020-10-24 02:16:37 +0800 CST

CSS平行四边形

  • 772

我正在尝试制作一个平行四边形，但我不知道如何制作我想要的那个。我已经看到了一些与我想要实现的非常相似的东西。

#paralelogramo {
   width: 150px; 
   height: 100px; 
   background: #bdc3c7;
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg); 
}
<div id="paralelogramo" class="forma"></div>

在此处输入图像描述 这是我得到的最多的。

我想要达到的结果如下：在此处输入图像描述

我不希望它成为图像，因为当我悬停并且鼠标效果无法正常工作时。

一切顺利 ！

css

1 Answers

  1. Best Answer

    在 Y 轴上工作，就是这样：

    #paralelogramo {
   width: 150px; 
   height: 100px; 
   background: #bdc3c7;
   -webkit-transform: skewY(-20deg); 
   -moz-transform: skewY(-20deg); 
   -o-transform: skewY(-20deg); 
   margin-top: 40px;
}
    <div id="paralelogramo" class="forma"></div>

    • 6