如何使用 HTML 和 CSS 创建具有“v”效果的线条

Question

我不熟悉使用这种类型的 CSS 效果。

我需要一种方法，允许我使用 HTML 和 CSS 在 HTML 元素中创建具有“v”效果的线条。下图显示了我需要完成的工作。

Answer 1

尝试了两种解决方案，您可以看看是否对您有帮助。 First one used this approach.

div {
  height: 1px;
  width: 200px;
  background: transparent;
  position: relative;
  cursor:pointer;
  border-bottom:1px solid black;
  border-right:1px solid black;
  border-left: 0px solid black;
  
  border-radius:10px;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 90px;
  height: 20px;
  width: 20px;
  background: white;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
}

<div></div>

This link 可能会给你更多的想法。

    #triangle {
      position: relative;
      text-align: center;
      padding: 10px;
      margin-bottom: 6px;
      height: 200px;
      width: 200px;
    }
    #triangle:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 1%;
      width: 50.5%;
      background: black;
      transform: skew(0deg, 30deg);
      }
    #triangle:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 1%;
      width: 49.5%;
      background: black;
      transform: skew(0deg, -30.5deg);
      }

  

<div  id="triangle"></div>