8

我想在 html 中制作一个具有截止角并在形状周围有边框的形状。

我可以制作没有边框的截断形状,如下所示:

html:

<div class="cut-off"></div>

CSS:

 .cut-off{
   position:relative;
   top:400px;
   left:400px;
   height:155px;
   width:200px;
   background:red;
}
.cut-off:after{
   position:absolute;
   bottom:0px; right:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid green;
   border-right: 20px solid transparent;
}
.cut-off:before{
   position:absolute;
   top:0; right:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:blue;
   width:20px; height:135px;
} 

小提琴在这里

现在我想要一个围绕形状的边框。我该怎么做?

我想要一个像这样的形状:

形状

充满了颜色。

4

3 回答 3

3

通过稍微改变你的 html 结构,我可以做到这一点

<div class="cut-off"></div>
<div class="cut-off2"></div>​


.cut-off{
position: relative;
width: 300px;
height: 150px;
border-bottom: 80px red solid;
border-right: 80px transparent solid;
}

.cut-off2{
position: absolute;
z-index: -1;
top:0;
left: 0;
width: 305px;
height: 150px;
border-bottom: 82px blue solid;
border-right: 80px transparent solid;
}

p{
position: absolute;
left: 0;
bottom:-40px;

}

​</p>

基本上,它在现有的 div 下添加了另一个 div。对于 cuttof 效果,它使用边框尺寸。

编辑:我还提供了一种在该区域中包含内容的方法。

于 2012-12-30T19:27:40.333 回答
0

试试这个:

<div class="cut-off">content</div>​​​​​​​​​​​
.cut-off{
   position:relative;
   height:155px;
   width:200px;
   background:red;
}
.cut-off:after{
   position:absolute;
   bottom:0px; right:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid green;
   border-right: 20px solid transparent;
}
.cut-off:before{
   position:absolute;
   top:0; right:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:blue;
   width:20px; height:135px;
}

顺便说一句,我在以下页面中找到了这个示例(因此我没有声称代码是我的):http ://www.wahnbriefe.net/web-design/css-cut-off-corners

于 2012-12-30T21:08:02.863 回答
-1

我不确定这是否是您正在寻找的,但我认为您可以使用 CCS3 边界半径属性来实现它。也许值得一看。也许您可以尝试以下方法:

<div class="cut-off">
    <p class="text">Simple text</p>
</div>​

 .cut-off{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid #7A7764;
    border-radius: 0 75px 0 0;

}

.text {
    margin: 15px;
}

​</p>

于 2012-12-30T20:13:09.963 回答