Question

我需要在垂直横幅内部做一个虚线边框，不知何故由于某些原因我没能做到，每当我弄乱边框时，横幅就会崩溃。你能帮我解决这个问题。

这是我的横幅：

div {
    background: #1589A1;
    padding: 20px;
    position: relative;
    color: #fff;
    width: 100px;    
    min-height: 70px;
    font: 600 16px sans-serif;
    color: #fff;    
}
div:after {
    content:'';
    position: absolute;
    left: 50%;
    bottom: -100px;
    border: 50px solid transparent;
    border-top: 50px solid #1589A1;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
div span{
    padding: 30px 0 30px;
    position: relative;
    display: block;
    z-index: 1;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

Fiddle example。 Picture of the banner.

Answer 1

这是一个有趣的。有时，查看最简单的方法会很有帮助，在这种情况下可能会使用SVG。 ; - ）

那就是说，假设你必须在CSS中做这个并且有一个合理的渐进增强策略（即你从什么开始，人们会看到他们的用户代理不支持所有的影响你另外），在我看来，最简单的方法是使用两个盒子：一个主盒子和一个盒子旋转以在底部形成钻石形状。

我们从包含文本的主框开始。我们设置背景颜色，边框，渐变效果。硬盒阴影在虚线边框周围添加了额外的“布料”。边框宽度未设置在右侧，渐变调整为正确的大小和位置。我们也会旋转整个事情。

div {
    position: absolute;
    top: 46px; /* height minus box-shadow */
    left: 0;
    width: 200px;
    height: 50px;
    background: steelblue;
    background-image: linear-gradient(to left, steelblue, rgba(255,255,255,0.5), steelblue);
    background-size: 20px 100%;
    background-repeat: no-repeat;
    background-position: 125px;
    transform: rotate(-90deg);
    border: 1px dashed black;
    border-width: 1px 0 1px 1px;
    box-shadow: 0 0 0 4px steelblue;
}

接下来，我们为钻石形状添加一个伪元素。要完美地做到这一点，你需要一个高度与第一个盒子的高度相匹配，如果你将第二个盒子从一个角落到另一个角落，你将得到的等腰直角三角形的斜边，这样两个盒子的角都完美对齐。我只是用它来表达：

div:before {
    position: absolute;
    top: 8px;
    left: -21px;
    display: block;
    content: ' ';
    width: 33px;
    height: 33px;
    background: steelblue;
    transform: rotate(45deg);
    border: 1px dashed black;
    box-shadow: 0 0 0 4px steelblue;
    border-width: 0 0 1px 1px;
}

只是一个盒子，与第一个相同的处理（虽然没有渐变，我们取消了不同的边框，加上只旋转了45度）。我们绝对定位这个。

最后，我们添加一些文字。默认情况下，这将显示在伪元素下，但绝对定位会解决此问题。

p {
    position: absolute;
    color: rgba(255,255,255,0.9);
    font: 1.5em Pacifico;
    line-height: 0.3em;
}

所以，它并不完美，但是

<强> here's a working example 即可。

请注意，我不使用任何供应商前缀，因此观看者可能需要针对特定浏览器进行调整。而且，它无处不在，所以也许SVG仍然是你的选择。

Answer 2

这是一个可以指导你的例子，现在非常静态但可以通过使其更具动态性来改进。

＆＃13;

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    padding: 50px;
}
.wrapper {
    position: relative;
    width: 70px;
    height: 170px;
    padding: 0 4px;
    background: #1589A1;
}
.content {
    padding: 15px 15px 0;
    width: 100%;
    height: 100%;
    font: 600 16px sans-serif;
    color: #fff;
    border: dashed #000;
    border-width: 0 2px;
}
.wrapper:after {
    content:'';
    position: absolute;
    left: 50%;
    bottom: -70px;
    border: 35px solid transparent;
    border-top: 35px solid #1589A1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.content:after {
    content:'';
    position: absolute;
    z-index: 1;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-90deg);
    width: 35px;
    height: 35px;
    border: dashed #000;
    border-width: 0 0 2px 2px;
    bottom: -22px;
    left: 17px;
}
.text {
    position: absolute;
    font-size: 18px;
    width: 150px;
    text-transform: uppercase;
    z-index: 5;
    top: 90px;
    left: -40px;
    -webkit-transform: rotate(-90deg);
}

＆＃13;

<div class="wrapper">
    <div class="content">
        <p class="text">my css banner</p>
    </div>    
</div>

＆＃13;

改进了上面的例子来做动态

在上面的代码段示例中，我旋转文本然后我将样式设置为固定高度到其容器，使边框位于底部，我将position: absolute设置为p.text以将其定位到正确的地方，总结一下我垂直给出了样式，但因为p.text在更改文本时position: absolute有wrapper，你还必须更改display: inline-block的高度，这有点烦人。

因此，在下面的解决方案中，我首先将wrapper设置为wrapper以使其适合内容，因此当您更改文本时它也会更改，然后我将样式设置为正常位置它是

enter image description here

最后旋转* { padding: 0; margin: 0; box-sizing: border-box; } body { padding: 120px 50px; } .wrapper { position: relative; padding: 4px 0; background: #1589A1; display: inline-block; -webkit-transform: translate(-38%, 100%) rotate(-90deg); transform: translate(-38%, 100%) rotate(-90deg); } .content { padding: 17px 33px 17px 0; width: 100%; color: #fff; border: dashed #000; border-width: 2px 0; height: 62px; } .wrapper:after { content:''; position: absolute; top: 0; left: 0; border: solid transparent; border-width: 35px 35px 35px 0; border-right: 35px solid #1589A1; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .content:after { content: ''; position: absolute; display: block; z-index: 1; left: -22px; top: 15px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 38px; height: 38px; border: dashed #000; border-width: 0 0 2px 2px; } .text { font-size: 20px; text-transform: uppercase; z-index: 5; margin-bottom: 0; white-space: nowrap; font-family: Arial; }。

enter image description here

＆＃13;

<div class="wrapper">
    <div class="content">
        <p class="text">my css dynamic banner</p>
    </div>
</div>

＆＃13;

configure

＆＃13;

因此，您现在可以更改文本而无需担心容器的高度。

<强> Here the jsfiddle to play with

如何在横幅内制作边框

2 个答案: