Question

我需要像图片中那样制作带边框的尖峰。不幸的是我没有设计，所以没有png或svg可用。我怎样才能在CSS中做到这一点？它甚至可能吗？我一直在努力做到这一点，但我能想出的最好的是如何在css中制作圆形曲折的教程，这甚至不能满足我的需要。

实现这一目标的最佳方法是什么？我只需要一些东西让我朝着正确的方向前进。感谢。

Answer 1

你应该可以使用Canvas标签重新创建它。它不是纯粹使用CSS，而是使用一些js。希望有所帮助。

<!DOCTYPE html>
<html>

  <body>

    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.</canvas>

    <script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.moveTo(0, 100);
      ctx.lineTo(200, 100);
      ctx.lineTo(250, 50);
      ctx.lineTo(350, 150);
      ctx.lineTo(400, 100);
      ctx.lineTo(500, 100);
      ctx.stroke();

    </script>

  </body>

</html>

Answer 2

尝试使用drop-shadow（Dudley's Link for Drop-Shadow）

filter: drop-shadow(0px -10px 0px rgba(0, 0, 255, 1));

＆＃13;

.outer {
  background-color: #DF290D;
  width: 300px;
}

.outer img {
  width: 100%;
  filter: drop-shadow(0px -10px 0px rgba(0, 0, 255, 1));
}

＆＃13;

<div class="outer">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Mountain_icon_%28Noun_Project%29.svg/2000px-Mountain_icon_%28Noun_Project%29.svg.png" />
</div>

＆＃13;

不是使用CSS创建尖峰，而是使用draw.io或其他东西创建图像并给它投影，这样可以节省大量时间。

Answer 3

您可以使用包含:before和:after伪元素的纯CSS和HTML来实现所需效果。

到目前为止，我已经开始设计并将完成，但你可以看到如何开始。很多这将是试验和错误，但希望它可以工作到您想要的输出。

body {
  background: lightgrey;
  padding: 0;
  margin: 0;
}

#title {
  width: 100%;
  padding: 15px;
  margin: 0;
  height: 50px;
  background: white;
  border-bottom: 2px solid red;
}

#title .left {
  float: left;
  height: 50px;
  line-height: 70px
  font-size: 30px;
  vertical-align: bottom;
  position: relative;
}
#title .left:after {
    content: '';
    border: 2px solid red;
    border-width: 2px 2px 0 0;
    transform: skew(-14deg) rotate(-44deg);
    width: 14px;
    height: 38px;
    display: block;
    position: absolute;
    bottom: -44px;
    right: -15px;
    background: lightgrey;
}

#title .right {
  float: left;
  margin-left: 50px;
  font-size: 20px;
  vertical-align: bottom;
}

<div id="title">
  <div class="left">Sole</div>
  <div class="right">Source</div>
</div>

如何在CSS中

3 个答案: