怎么设置border-width为父元素高度的30%

Question

不用js只用css能实现吗

Answer 1

我看到过的实现是,设置像素绝对高度...[Orz...大概没啥用...
例如:

<div class="father">
    <div class="son"></div>
</div>

.father {
    position: relative;
    height: 100px;
    width: 100%;
}
.father .son {
    position: absolute;
    height: 30px;
    width: 100%;
}

Answer 2

    <style type="text/css">
        #father {
            height: 100px;
            width: 200px;
            background: green;
        }
        #child {
            height: 30%;
            width: 20px;
            background: yellow;
            margin: auto;
        }
        .rotate90 {
            transform: rotate(90deg);
        }
    </style>



<div id="father">
    <div id="child" class="rotate90">
    </div>
</div>

強行rotate, 假裝是width.