在css html

Question

嘿，我想在标有红色的图片中制作如下边框。 你能检查我的代码并帮助我吗？这是jsFiddle的链接。

或代码段

.msg {
  margin:auto;
  width:70%;
  padding:5px;
  border:1px solid black;
}

<div class="msg">
 <h1>
  This Promise you 
 </h1>
 <p align="justify">
  this is a little bit paragraph this is a little bit paragraph 
  this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph 
 </p>
</div>

Answer 1

旋转元素。绝对定位。

＆＃13;

＆＃13;

.msg {
  margin:auto;
  width:70%;
  padding:5px;
  border:1px solid black;
  position: relative;
}
.pointer{
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  border-top-color: black;
  border-left-color: black;
  position: absolute;
  top: 12px;
  left: -11px;
  transform: rotate(-45deg);
  background: white;
}

＆＃13;

<div class="msg">
 <h1>
  This Promise you 
 </h1>
 <p align="justify">
  this is a little bit paragraph this is a little bit paragraph 
  this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph 
 </p>
 <span class='pointer'></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是代码段：

.msg {
  margin: auto;
  width: 70%;
  padding: 5px;
  border: 1px solid black;
  background-color: white;
}
#triangle {
    background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 54%, rgba(252, 253, 255, 0) 55%, rgba(125, 185, 232, 0) 100%) repeat scroll 0 0;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    height: 15px;
    margin-left: -14px;
    margin-top: 35px;
    position: absolute;
    transform: rotate(45deg);
    width: 15px;
}

<div class="msg">
  <span id="triangle"></span>
  <h1>
    This Promise you 
  </h1>
  <p align="justify">
    this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this
    is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this is a little bit paragraph this
    is a little bit paragraph this is a little bit paragraph this is a little bit paragraph
  </p>
</div>

这是jsFiddle

我希望这会对你有所帮助。