css-实现梯形的效果

xyc

    咱们继续之前说的css实现图形的效果方法，今天来说说梯形的实现方法。
    梯形：
        原理：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。
        效果：
        
      HTML代码：
      

[HTML] 纯文本查看 复制代码

<div class="div"></div>

      css样式：
      

[CSS] 纯文本查看 复制代码

.div {
	    height: 0;
	    width: 100px;
	    float: left;
	    border-bottom: 100px solid #dc2500;
	    border-left: 50px solid transparent;
	    border-right: 50px solid transparent;
      }

以上就是梯形的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

范范

支持下，加油