使钻石DIV适合父DIV

Question

我正在使用CSS设置钻石div。但钻石div正在外出或是父母div。

有没有办法计算钻石div的对角线长度，所以我可以将宽度设置为父宽度？

HTML

<div class="col-md-2">
    <div class="ab-iconbar text-center">
        <div class="ab-baric">
            <img src="images/icons/baby63.svg" alt="baby">
        </div>
        <div class="ab-icobox">
            <h3>19<small>to</small>34</h3>
        </div>
    </div>
</div>

SCSS

.ab-iconbar {
    @extend .ab-bg-yellow;
    .ab-baric {
        margin: 0 auto;
        display: block;
        width: 100%;
        @extend .ab-bg-gsea; //bg color 
        text-align: center;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);     
        img, .fa {
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
    .ab-icobox {
        @extend .ab-c-midnit;
        padding: 10px;
    }
}

JS

var ab_icbar_w = $('.ab-iconbar').width();
var ab_baric_w = $('.ab-baric').css('width', ab_icbar_w);
$('.ab-baric').css('height', ab_baric_w);

当前输出

Answer 1

你可以使用毕达哥拉斯定理。

所以var diagLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))

Answer 2

Pythagorus定理会给你对角线长度。 从jQuery获取高度和宽度，并使用pythagorus定理。