【问题标题】:How to create a line with a "v" effect using HTML and CSS如何使用 HTML 和 CSS 创建具有“v”效果的线条
【发布时间】:2020-08-28 20:21:18
【问题描述】:

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

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

【问题讨论】:

  • 您能与我们分享您已经拥有的代码吗?有很多 CSS 技巧网站肯定会为您解决这个问题。
  • 我还没有创建任何东西。该图像是在 zeplin 中创建的线框
  • 你的问题。 Stackoverflow 是为了帮助您调试和改进代码,而不是为您编写代码。

标签: javascript html css responsive-design css-selectors


【解决方案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>

【讨论】:

    猜你喜欢
    • 2016-07-30
    • 2017-06-24
    • 2018-06-03
    • 1970-01-01
    • 1970-01-01
    • 2012-10-06
    • 2021-09-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多