css3切角文本框_html – 用边框制作切角

我想在html中创建一个具有截断角和形状边界线的形状.

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

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;

}

现在我想要一个围绕形状的边框.

我该怎么做？

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

充满了色彩.