Html 如何在div内获得自适应对角线？-CSS

我正在努力做到这一点

有一个内分区和外分区。内分区旋转45度。但是我希望内部div根据外部div进行转换。也就是说，我可以只给外部div指定固定属性，而内部必须根据外部div形成一个

^

。我该怎么做

这里是html和css

<div class="diva"><div class="divb"></div></div>

.diva{
    height: 200px;
    width: 300px;
    background: #CCC;
}
.divb {
    position: relative; 
    padding: 100px 0 0;
    height: 100%;
    width: 100%;
}
.divb:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-left: solid 4px green;
    border-top: solid 4px green;
    border-bottom: solid 4px transparent;
    border-right: solid 4px transparent;
    transform: rotate(45deg);
}

女主角{
高度：200px；
宽度：300px；
背景：#CCC；
}
.迪夫{
位置：相对位置；
填充：100px0；
身高：100%；
宽度：100%；
}
B:以前{
内容：''；
显示：块；
宽度：100%；
身高：100%；
左边框：实心4px绿色；
边框顶部：实心4px绿色；
边框底部：实心4px透明；
右边框：实心4px透明；
变换：旋转（45度）；
}

---

是小提琴。

这是一个棘手的问题，但它是可能的。这是我的密码：

HMTL：

---

我希望这对你有用。祝你好运

你的确切要求还不清楚。角度总是90度吗？如果设置外部div的大小，例如

800x50

，会怎么样？那应该如何呈现。。。您需要使用浏览器特定的

-webkit变换：旋转（45度）

和

-ms变换：旋转（45度）除了变换之外：旋转（45度）

以使其在所有浏览器中都能正常工作。@KingKing^应该放在框内。顶端的头部应该接触到包装的上角，底部的腿应该接触到包装的左右腿。恐怕你必须在这一部分中使用JavaScript——获取外部div维度，然后应用三角学获得直角，并将其作为内联样式提供给内部div。（编辑：另外，它不会是一个90度，所以你可能需要两个内部div。）我担心这里不会有任何简单的纯CSS解决方案。太有活力了。至少你需要一个倾斜变换，这里的倾斜角度是动态的，取决于宽度和高度之间的比率。我刚刚想到了一个更糟糕的解决方案，使用

线性渐变

背景来渲染边缘（腿部），缺点是线条质量差（由于缺乏抗锯齿，可能会出现一些可见的锯齿状）。你可以在这里查看演示

<div id="a"></div>

#a {
    position: relative;
    background: #ffffff;
    position:absolute;
    top:50px;
    left:50px;
}
#a:after, #a:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
#a:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 30px;
    margin-left: -30px;
}
#a:before {
    border-color: rgba(0, 255, 0, 0);
    border-bottom-color: #00ff00;
    border-width: 36px;
    margin-left: -36px;
}