Question

我发现了一些关于如何对边框进行角度调整的文章，但我想要做的是有点不同。

我有一个带有虚线边框的元素，如下所示：

.box { border: 1px dashed #fff; }

但是，我试图同时将.box元素的角和其虚线边框成45度角。

这可能吗？

Answer 1

通过调整border-radius的贝塞尔曲线可以得到一些非常接近45度的角度： http://www.css3.info/preview/rounded-border/

Answer 2

你有没有理由不想用2个背景元素做这个？

.box {
    /* this background image will stick to the top of the box */
    background: url(/* you would put a 10px high image that is the width of said box */) no-repeat left top; 
    display: block;
    padding: 10px 0 0; /* this padding element needs to match the background height */
}
    .box .inner {
        /* this will stick the background image to the bottom, and grow with the natural height of the box */
        background: url(/* you'd put a looong background image, that could stretch vertically */) no-repeat left bottom; 
        display: block;
        padding: 0 10px 10px;
    }

您的标记看起来像这样：

<div class="box">
    <div class="inner">
        ...Content goes here...
    </div>
</div>

我能理解你是否只想用border风格来做这件事，但我不知道如何做正确的角度并让它在IE中工作，这是最好的。

CSS Dashed和Angled border

2 个答案: