Как сделать такой треугольник с помощью css?

body{
    background: rgba(51,51,51,.5);
}
div{
    height: 100px;
    width: 300px;
    border-image: linear-gradient(to right, orange, orange 40px, transparent 40px, transparent 70px, orange 70px) 5;
    border-style:solid;
    border-width: 5px;
    margin: 50px auto 0;
    position: relative;
}
div:before{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-left: 5px solid orange;
    border-top: 5px solid orange;
    position: absolute;
    top:-16px;
    left:38px;
    transform:rotate(45deg);
}
div:after{
    content:'';
    display: block;
    width: 100%;
    border-bottom: 5px solid orange;
    position: absolute;
    bottom: -5px;
}

html, body {
  margin: 0;
  height: 100%;
}
 
body {
  padding-top: 100px;
  background: url("http://placeimg.com/1200/900") no-repeat center top / cover;
}
 
.block {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  padding-top: 1px;
  color: #fff; 
  border: 10px solid #2cf;
  border-top-width: 0;
  position: relative;
  background: linear-gradient(90deg, #2cf 30px, transparent 30px, transparent 72px, #2cf 72px) repeat-x 0 0 / 100% 10px;
}
  .block:before {
    content: '';
    position: absolute;
    top: -18px;
    left: 30px;
    width: 30px;
    height: 30px;
    border: 10px solid #2cf;
    border-width: 10px 0 0 10px;
    transform: rotate(45deg);
  }