如何制作方角的东西？

真的含糊不清的问题，我知道，但我不知道该怎么形容他们......基本上，我想这些：如何制作方角的东西？

What I want

我说的是红色角落的东西。什么是最简单的方法来实现这一点？很显然，你可以制作出独特的形状，但是我想让他们处于你想要的位置，即使所有的东西都是重新调整大小和形状，都会是一种痛苦。这是唯一的方法吗？

2015-07-20 Tommay

也许尝试CSS'边境image' – Matthew

下面的方法可能是有用的。添加两个伪元素，一个具有顶部和底部边框，第二个具有特定颜色（白色）的左侧和右侧边框，以使它们“白化”原始边框（在这种情况下为蓝色）。

这种方法是纯粹的CSS，不涉及额外的标记。

div { 
 
    font-size: 4.00em; 
 
    padding: 40px; 
 
    border: 2px solid blue; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
div:after { 
 
    content: ''; 
 
    display: block; 
 
    border-left: 2px solid white; 
 
    border-right: 2px solid white; 
 
    position: absolute; 
 
    height: 50%; 
 
    left: -2px; 
 
    right: -2px; 
 
    top: 25%; 
 
    bottom: 25%; 
 
} 
 
div:before { 
 
    content: ''; 
 
    display: block; 
 
    border-top: 2px solid white; 
 
    border-bottom: 2px solid white; 
 
    position: absolute; 
 
    height: 100%; 
 
    left: 25%; 
 
    right: 25%; 
 
    top: -2px; 
 
    bottom: -2px; 
 
}

<div>Box Text</div>

来源

2015-07-21 00:24:47

好于矿山，1，我应该做的边界，而不是这当然重叠的文字的背景。 – misterManSam

.a { 
 
    height: 100px; 
 
    width: 100px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
    background-color: #eee; 
 
    position: relative; 
 
    } 
 

 
.ul { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-top: 1px solid black; 
 
    border-left: 1px solid black; 
 
    } 
 

 
.ur { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-top: 1px solid black; 
 
    border-right: 1px solid black; 
 
    } 
 

 
.ll { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-bottom: 1px solid black; 
 
    border-left: 1px solid black; 
 
    } 
 

 
.lr { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    }

<div class="a"> 
 
    <span>text</span> 
 
    <div class="ul"></div> 
 
    <div class="ur"></div> 
 
    <div class="ll"></div> 
 
    <div class="lr"></div> 
 
</div>

来源

2015-07-21 00:04:13

这里是在评论中提到马修的border-image解决方案。只是为了记录，这里有很多好的答案。更何况border-image可能不适用于所有浏览器。

Can I use border-image

下面是一个使用内联SVG中的溶液。

@import url(http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise); 
 

 
div { 
 
    width: 275px; 
 
    height: 155px; 
 
    margin: 0 auto; 
 
    font-size: 6.2em; 
 
    text-align: center; 
 
    font-family: 'Waiting for the Sunrise', cursive; 
 
} 
 

 
.inline-svg { 
 
    border: 5px solid white; 
 
    border-image: url('data:image/svg+xml;utf8,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="275px" height="155px" viewBox="0 0 275 155" enable-background="new 0 0 275 155" xml:space="preserve"><path fill="#ff0000" d="M0.5,38.5v-38h57v15h-42v23H0.5z M260.5,38.5h15v-38h-59v15h44V38.5z M260.5,112.5v28h-44v15h59v-43H260.5z M15.5,112.5h-15v43h57v-15h-42V112.5z"/></svg>') 2% stretch; 
 
    min-width: 50%; 
 
} 
 

 
@media screen and (min-width: 992px) { 
 
    .inline-svg { 
 
    width: 360px; 
 
    height: 265px; 
 
    } 
 
    div { 
 
    font-size: 9.4em; 
 
    } 
 
}

<div class="inline-svg">Text</div>

来源

2015-07-21 00:44:45 DavidDomain

如何制作方角的东西？

回答

相关问题