内部所有内容周围的 div 背景色

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

为什么不尝试使用 css 绘制三角形，因为它给出的结果与您想要的结果相同

.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;
    }

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

Answer 2

试试这个：

<div style="background-color : yellow; padding: 15px 0px; width: 40px;">
    <div id="lineAll">
       <div id="line1"></div>
       <div id="line2"></div>
    </div>
</div>

<style>
#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;
}

Answer 3

试试这个

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

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

Answer 4

只需使用

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>

Answer 5

您可以使用一个元素和 :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>

内部所有内容周围的 div 背景色

Background-color for a div around all content inside

html

css

height

css-shapes