css 如何绘制等腰梯形边框？

Question

这个等腰梯形用的border写的

            width: 0;
            height: 80px;
            border-right: 15px solid #28282a;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -13px;
            z-index: 1;

如何给等腰梯形添加外边框和外层长方形外层border连接一起

想要的样式

Answer 1

用CSS clip-path 来实现比较简单一点
原里就是画两个梯形，上面一个小一点点，叠加在上面

.test2 {
  width: 115px;

  height: 230px;

  position: relative;

  top: -4px;

  background: #4FA6E5;

  border-bottom: 1px solid #4FA6E5;

  clip-path:polygon(0 55px, 100% 0,100% 100%,0 calc(100% - 55px));

  box-sizing: border-box;
}
.test2:after{
  content:'';
  padding: 0;
  display:block;
  width: 100%;

  height: 100%;

  box-sizing: border-box;

  background: #082F4C;

  clip-path:polygon(2px 57px, 100% 2px,100% calc(100% - 2px),2px calc(100% - 57px));
  
}

效果演示
https://jsbin.com/mogirok/edit?css,output

Answer 2

一般来说我不会使用 clip-pach 因为要画。所以一般没有圆角的我都是适用的伪类去覆盖。
比如说下面的这样一个 Demo

Answer 3

可以搞, 想了想感觉很难搞我想到的思路是这样的:

在梯形上覆盖三个div, 调节成图中红线样式位置, 分别设置阴影

或者就不用CSS做梯形, 用canvas画梯形加阴影也比较方便:
位置参数稍微调一下

绘制梯形

<div>
    <canvas id="trails" width="200" height="170"> </canvas>
</div>

<script>
    var canvas = document.getElementById("trails");
    var test = canvas.getContext("2d");
    var img = new Image();
// 添加四个角的坐标,最后要回到起始点坐标
    test.moveTo(0, 0);            //moveTo()起始位置
    test.lineTo(200, 0);         //lineTo()路径位置
    test.lineTo(140, 170);
    test.lineTo(0, 170);
    test.lineTo(0, 0);
    img.onload = function () {                  //要让图片先加载完再填充
             var pat = test.createPattern(img, "no-repeat",);
                 test.fillStyle = pat;
                  test.fill();
            }
    img.src = "image/yingren_8.png";  
</script>

绘制阴影

test.shadowOffsetY =4
    //  设置X轴偏移量
    test.shadowOffsetX =10
    //  设置模糊度
    test.shadowBlur = 5
    //  设置阴影颜色
    test.shadowColor = 'red'

最方便的做法: 找UI要这个的切图

Answer 4

试一试 filter 中的 drop-shadow

.shadow {
  width: 160px;
  height: 0px;
  border: 100px solid #2c3e50;
  border-top: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid gray;
  filter: drop-shadow(0px 0px 0.5px blue)
          drop-shadow(0px 0px 0.5px blue)
          drop-shadow(0px 0px 0.5px blue)
          drop-shadow(0px 0px 0.5px blue)
          drop-shadow(0px 0px 0.5px blue)
}