在CSS3中使用一个平行四边形 [英] Make a parallelogram with one side in CSS3

问题描述

我用CSS3做了平行四边形。使用此代码：

  #parallelogram {
 width：150px; 
 height：100px; 
 -webkit-transform：skew（20deg）; 
 -moz-transform：skew（20deg）; 
 -o-transform：skew（20deg）; 
 background：red; 
} 
  

现在我有了左右斜角。但我只想到righ斜面。

解决方案

UPDATE：

以下是一个示例和结果代码： jsFiddle < a>。

 < style type =text / css> 
 #trapezoid {
 height：0; 
 width：100px; 
 border-bottom：100px solid red; 
 border-left：50px solid transparent; 
 border-right：50px solid transparent; 
} 
< / style> 
< div id =trapezoid>< / div> 
  

这将创建一个梯形。

或这个：

 < style type =text / css > 
 #parallelogram {
 width：150px; 
 height：100px; 
 -webkit-transform：skew（20deg）; 
 -moz-transform：skew（20deg）; 
 -o-transform：skew（20deg）; 
 background：red; 
} 
< / style> 
< div id =parallelogram>< / div> 
  

这将创建平行四边形

这里是一篇关于用CSS创建各种形状和一个HTML元素的文章。这是一种非常有趣的方式，用于创建从三角形到星形的每个形状。

CSS的形状< a>

I have make a parallelogram with CSS3. With this code:

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

Now I have the right and left bevel. But i want only to the righ the bevel. How can i make that?

Thanks

解决方案

UPDATE:

Here is an example and the result code: jsFiddle.

<style type="text/css">
#trapezoid {
    height: 0;
    width: 100px;
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
</style>
<div id="trapezoid"></div>

This will create a trapezoid.

Or this:

<style type="text/css">
#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}
</style>
<div id="parallelogram"></div>

This will create a parallelogram

Here is an article about creating all kinds of shapes with CSS only and a single HTML element. It's a very interesting way for creating every shape from a triangle to a star.
The Shapes of CSS

这篇关于在CSS3中使用一个平行四边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！