在左侧中间创建一个带三角形切口的div

Question

我想设计一个看起来像这样的div：

我试图在网上找到，但我无法找到这种设计。

虚线不是必需的，因为它是白色的截图。

Answer 1

＆＃13;

＆＃13;

.sample{
  height: 200px;
  width: 200px;
  background: red;
  position: relative;
}

.sample::after{
  width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #FFF;
display: block;
  content:"";
  position: absolute;
  top: 10px;
}

＆＃13;

<div class="sample"> </div> 

＆＃13;

＆＃13;

＆＃13;

.sample{
  height: 200px;
  width: 200px;
  background: red;
  position: relative;
}

.sample::after{
  width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #FFF;
display: block;
  content:"";
  position: absolute;
  top: 10px;
}

Answer 2

这可以帮助您实现目标。

＆＃13;

＆＃13;

.sample {
    height: 200px;
    width: 160px;
    background: #fff;
    position: relative;
    border: 2px solid #000;
}

.sample::after {
    border-color: transparent transparent transparent #000;
    border-style: solid;
    border-width: 20px 0 20px 30px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: 30px;
    width: 0;
}

.sample::before {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 19px 0 19px 28px;
    content: "";
    display: block;
    height: 0;
    left: -2px;
    position: absolute;
    top: 31px;
    width: 0;
    z-index: 1;

＆＃13;

<div class="sample"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试以下代码

＆＃13;

＆＃13;

.sample{
  height: 200px;
  width: 200px;
  background: #fff;
  position: relative;
  border:2px solid #000;
}

.sample::after{
  width: 11px;
  height: 11px;
border-style: solid;
border-width: 2px;
border-color: #000 #000 #fff #FFF;
display: block;
  content:"";
  position: absolute;
  top: 30px;
 left:-10px;
-ms-transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg);
background-color:#fff;
}

＆＃13;

<div class="sample"></div>

＆＃13;

＆＃13;

＆＃13;