Question

我想这样做：

outerDiv and innerDiv

我使用css border属性制作一个形状（三角形），高度为0px＆amp;宽度。形状应与其父级相同。它的父高是未知的和变化的。如何通过使用css来实现（不使用Javascript）

我也尝试使用百分比（border-width：50％;）

这是代码，但不是必需的！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html, body {
            height: 100%;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        body > div {
            border: 2px solid blue;
            width: 400px;
            height: 70px;/* unknownHeight = 70px */
            display: flex;
            flex-direction: row;
        }
        .shape {

            border-width: 35px; /* unknownHeight/2 = 35px */
            border-style: solid;

            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: red;
            border-left-color: red;
        }
        .stableDiv {
            flex: 1;
        }
    </style>
</head>

<body>
    <div>
        <div class="stableDiv"></div>
        <div class="shape"></div>
    </div>
</body>
</html>

Answer 1

以下是使用css border属性绘制三角形的方法：

＆＃13;

#shape {
  border-width: 50px 50px 0 0;
  border-color: transparent red transparent transparent;
  border-style: solid;
}

＆＃13;

<div id="shape">
</div>

＆＃13;

https://jsfiddle.net/zjpen5at/1/

不确定是否可以回答您的问题，因为它不清楚。

Answer 2

由于您没有提到任何代码。我建议您访问以下链接，使用CSS生成三角形。

http://apps.eky.hk/css-triangle-generator/

https://css-tricks.com/examples/ShapesOfCSS/

Answer 3

实际上，您无法使用边框或标准HTML元素执行此操作，因为没有CSS机制可以将元素的宽度与高度相关联。

但是，您可以使用带有三角形多边形的方形SVG 。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  height: 50px;
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  position: relative;
}

.taller {
  height: 100px;
}

svg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

svg polygon {
  fill: red;
}

div:hover polygon {
  fill: blue;
}

＆＃13;

<div>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
  <polygon points="0,0 0,100 100,100"/>
</svg>
</div>

<div class="taller">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
  <polygon points="0,0 0,100 100,100"/>
</svg>
</div>

＆＃13;

使用css将边框宽度设置为其父级高度元素的一半？

3 个答案: