CSS3 Diagonal Border Line - css

Question

I'm trying to make a box that the bottom right border has to be a diagonal line, like in the image below:
Has anyone an idea of how can I do it without using a background image?

Answer 1

Example 1 - link
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px 60px;
}
.btn,
.btn span{
width: 300px;
height: 100px;
display: inline-block;
position: relative;
color: #e74c3c;
font: bold 18px/100px'segoe ui';
text-transform: uppercase;
text-align: center;
text-decoration: none;
overflow: hidden;
padding: 2px;
}
.btn span {
width: 100%;
height: 100%;
}
.btn:before,
.btn span:before{
content:'';
position: absolute; right: -500%;
width: 1100%;
height: 1100%;
background: #c00;
z-index: -1;
}
.btn:hover span{
color: #000;
}
.btn:hover:before{
background: #000;
}
/* ----- btn-left-top ----- */
.btn-left-top:before,
.btn-left-top span:before{
top: 20px;
transform-origin: 46% top;
transform: rotate(-45deg);
}
.btn-left-top span:before{
top: 19px;
background: #fff;
}
/* ----- btn-left-bottom ----- */
.btn-left-bottom:before,
.btn-left-bottom span:before{
bottom: 20px;
transform-origin: 46% bottom;
transform: rotate(45deg);
}
.btn-left-bottom span:before{
bottom: 19px;
background: #fff;
}
/* ----- btn-right-top ----- */
.btn-right-top:before,
.btn-right-top span:before{
top: 20px;
transform-origin: 54% top;
transform: rotate(45deg);
}
.btn-right-top span:before{
top: 19px;
background: #fff;
}
/* ----- btn-right-bottom ----- */
.btn-right-bottom:before,
.btn-right-bottom span:before{
bottom: 20px;
transform-origin: 54% bottom;
transform: rotate(-45deg);
}
.btn-right-bottom span:before{
bottom: 19px;
background: #fff;
}
<a href="#" class="btn btn-left-top">
<span>btn-left-top</span>
</a>
<a href="#" class="btn btn-right-top">
<span>btn-right-top</span>
</a>
<a href="#" class="btn btn-right-bottom">
<span>btn-right-bottom</span>
</a>
<a href="#" class="btn btn-left-bottom">
<span>btn-left-bottom</span>
</a>
Example 2 - link
* {
margin: 0;
padding: 0;
}
body {
padding: 20px 60px;
}
.btn{
width: 300px;
height: 100px;
display: inline-block;
position: relative;
border: 4px solid #e74c3c;
color: #e74c3c;
font: bold 18px/100px 'segoe ui';
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
.btn > span:before {
content: '';
position: absolute; bottom: 12px; right: 9px;
width: 66px;
height: 66px;
transform: rotate(45deg);
z-index: 1;
border-right: 4px solid #e74c3c;
}
.btn:before,
.btn:after{
content: '';
position: absolute; bottom: -4px; right: -4px;
}
.btn:before{
width: 47px;
height: 0;
border-bottom: 4px solid #fff;
}
.btn:after{
width: 0;
height: 47px;
border-right: 4px solid #fff;
}
.btn:hover{
border: 4px solid #4169E1;
color: #4169E1;
}
.btn:hover > span:before{
border-right: 4px solid #4169E1;
}
<a href="#" class="btn">
<span>test</span>
</a>
Fiddle

Answer 2

Check this out it may help you click
HTML
<div class="blockHead">
<span class="blocktext">
ABC Team
</span>
</div>
CSS
.blockHead:after {
color:#4D81BF;
border-left: 20px solid;
border-top: 20px solid;
border-bottom: 20px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
}
.blockHead {
background-color:#4D81BF;
/*width: 150px; */
height: 40px;
display: inline-block;
position: relative;
}
.blocktext{
color:white;
font-weight:bold;
padding:0px 40px 0px 10px;
font-family:Arial;
font-size:11;
line-height:2.5;
}