Question

我正在研究一个'arrow'-div。它目前看起来像这样：

div包含另外两个div（两行）。我希望背景几乎缠绕在线条上。但黄色背景的高度比线条的高度小很多。我已经尝试过'height：auto'了。我希望有人可以帮助我。

#lineAll {
  background-color: yellow;
  height: auto;
}

#line1 {
  height: 2px;
  background-color: black;
  transform: rotate(35deg);
  width: 40px;
}

#line2 {
  height: 2px;
  background-color: black;
  transform: rotate(-35deg);
  width: 40px;
  margin-top: 20px;
}

<div id="lineAll">
  <div id="line1"></div>
  <div id="line2"></div>
</div>

编辑：

宽度也不是我想要的方式。它目前是屏幕的100％宽度。

Answer 1

试试这个：

 D num             s              5p 1 inz(9876.5) 
 D msg             s             20                
 C                   move      '123'         num   
 C                   eval      msg = %char(num)    
 C     msg           dsply                         
 C                   return

Answer 2

您可以使用一个元素和:after伪元素执行此操作。只需创建包含border-top和border-right的较小伪元素，然后将其旋转为45deg。

.element {
  width: 50px;
  height: 60px;
  background: yellow;
  position: relative;
}
.element:after {
  content: '';
  position: absolute;
  top: 15px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  height: 30px;
  width: 30px;
  transform: rotate(45deg);
}

<div class="element"></div>

要为-135deg创建其他按钮，请设置right: 0px

.element {
  width: 50px;
  height: 60px;
  background: yellow;
  position: relative;
  display: inline-block;
  margin: 50px;
}
.element:after {
  content: '';
  position: absolute;
  top: 15px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  height: 30px;
  width: 30px;
  transform: rotate(45deg);
}
.element.right:after {
  transform: rotate(-135deg);
  right: 0px;
}

<div class="element"></div>
<div class="element right"></div>

Answer 3

为什么不尝试使用css绘制三角形，因为它会提供您想要达到的相同结果

＆＃13;

.triangle {
    display: block;
    width: 0;
    height: 0;
    border-top: 108px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 108px solid transparent;
    border-left: 108px solid #4abdac;
    }

＆＃13;

<html>
<head></head>
<body>
<div class="triangle"></div>
</body>
</html>

＆＃13;

Answer 4

试试这个

#lineAll {
    background-color: yellow;
    height: auto;
    padding: 10px 0;
}

现场演示 - https://jsfiddle.net/grinmax_/j4aza1om/

Answer 5

只需使用

overflow: hidden;
display: inline-block;

#lineAll {
  background-color: yellow;
  overflow: hidden;
  display: inline-block;
}

#line1 {
  height: 2px;
  background-color: black;
  transform: rotate(35deg);
  width: 40px;
}

#line2 {
  height: 2px;
  background-color: black;
  transform: rotate(-35deg);
  width: 40px;
  margin-top: 20px;
}

<div id="lineAll">
  <div id="line1"></div>
  <div id="line2"></div>
</div>

围绕所有内容的div的背景颜色

5 个答案: