如何用CSS制作基础形状？

Question

我正在尝试使用css制作基本形状，因为我需要将其添加到网站的主页。最终版本附在图片下方。 请帮帮我，我不确定如何实现这个

#base {
  background: #0a863d;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
    position: relative;
    width: 100px;
}
#base:before {
  border-bottom: 35px solid #0a863d;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -35px;
  width: 0;
}

<div id="base"></div>

Answer 1

更改:after元素的边框：

#base {
  background: #0a863d;
  display: inline-block;
  height: 60px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 100px;
}
#base:before {
    border-left: 30px solid #0a863d;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    right: -30px;
}

<div id="base"></div>

Answer 2

#base {
  background: #0a863d;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 100px;
}

#base:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 27.5px 0 27.5px 25px;
  border-color: transparent transparent transparent #0a863d;
  position: absolute;
  right: -25px;
}

<div id="base"></div>

Answer 3

#base {
  background: #0a863d;
  display: inline-block;
  height: 50px;
  margin-left: 20px;
  margin-top: 55px;
    position: relative;
    width: 100px;
}
#base:before {
  border-bottom: 25px solid transparent;
  border-left: 50px solid #0a863d;
  border-top: 25px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  left:100%;
  width: 0;
}

<div id="base"></div>

Answer 4

使用::before伪元素。

＆＃13;

＆＃13;

#base {
  background: #0a863d;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
    position: relative;
    width: 100px;
}
#base:before {
      border-bottom: 27px solid transparent;
    border-left: 30px solid #0a863d;
    border-right: 30px solid transparent;
    border-top: 28px solid transparent;
    content: "";
    height: 0;
    right: -60px;
    position: absolute;
    top: 0px;
    bottom: 0;
    width: 0;
    margin: auto;
}

＆＃13;

<div id="base"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

您可以通过更改margin和border属性来旋转箭头：它们必须是＆＃34;旋转＆＃34;在右侧（left变为top，top变为right，依此类推）：

＆＃13;

＆＃13;

#base {
  background: #0a863d;
  display: inline-block;
  height: 66px;
  margin-top: 20px;
  margin-right: 55px;
  position: relative;
  width: 500px;
}
#base:before {
  border-left: 35px solid #0a863d;
  border-top: 33px solid transparent;
  border-bottom: 33px solid transparent;
  content: "";
  height: 0;
  top: 0;
  position: absolute;
  right: -35px;
  width: 0;
}

＆＃13;

<div id="base"></div>

＆＃13;

＆＃13;

＆＃13;

可以通过调整height的{​​{1}}以及{{1}的#base和border-top来更改箭头的高度 }}。 （请注意，border-bottom和#base:before的总和应与border-top相同。）
可以通过调整border-bottom

的height来更改箭头的宽度