如何在框上制作此特定阴影：之前？

Question

如何使用css来实现此框的左上方，如下面的图片？

我不能在黄色三角形下方绘制阴影。

一些建议会有所帮助。

到目前为止，以下是我的CSS + HTML：

   

:root {
        --jaune: #FFF701;
        --bleu: #212D55; 
            }
           
    
  
.book{
        margin-bottom: 0px;
        font-size: x-small;
        color: #364165;
        text-align: center;
 }     
        
    
.box {
        border: 1px solid var(--bleu);
        background-color: #fff;
        position: relative;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 16px;
        }
        
    
.box::before {
    content: ' ';
    border-top: 32px solid #d3d5dd;
    border-right: 30px solid var(--jaune);
    width: 0;
    position: absolute;
    }
    
    
.btn_book{
         background-color: #212d55;
         width: 128px;
         margin-right:79px;
         margin-left:79px;
         border: 1px solid #212d55;
         position: absolute;
         color: white;
         text-transform: uppercase;
         cursor: pointer;
         }
       
    
.btn_book:hover{
                background-color: var(--jaune);
                color:#212d55;
        
            }
       
    
.btn_book:hover::before {
            border-top: 10px solid #212d55;
            }
    
    
.btn_book:before {
            content: "";
            height: 0;
            width: 0;
            border-top: 10px solid #fffa0a;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            position: absolute;
            z-index: 1;
            top:0;
            left: 0;
            transform-origin: left;
            transform: translate(60%) translateY(-71%) rotate(135deg)
        }

   

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box" style="width: 18rem; height: 19rem;">
    <img src="https://b2btolink.com/leboudoir/wp-content/themes/leboudoir/images/logo.png"  style="width: 100px; margin-left:80px;">
    <p style="text-align:center;color: #212d55;">
        <b>NEW CANAAN</b>
    </p>
    <hr class="dashed">
    <p class="book"> 160 Main Street</p>
    <p class="book"> New Canaan CT 06840</p>
    <p class="book"> 203-957-8600</p>
    <hr class="dashed">
    <button type="button" class="btn_book">BOOK NOW</button>
</div>

使用shadow属性怎么可能

Answer 1

这里是使用带有渐变和偏斜变换的多个背景的想法：

.box {
  border: 1px solid #212D55;
  background-color: #fff;
  position: relative;
  margin: 10px;
  background:
   linear-gradient(to top left,transparent 50%,#d3d5dd 50%) top left/32px 32px no-repeat;
}

.box::before {
  content: ' ';
  position: absolute;
  top:-1px;
  left:-1px;
  width:34px;
  height:34px;
  background:
    linear-gradient(to bottom right,transparent 45%,grey 50%) bottom/100% 5px,
    linear-gradient(to bottom right,transparent 45%,grey 50%) right/5px 100%,
    linear-gradient(to bottom right,transparent 50%,yellow 50%);
  background-repeat: no-repeat;
  transform: skew(5deg,5deg);
 }

<div class="box" style="width: 18rem; height: 19rem;">
  
</div>

Answer 2

您需要对此进行一些调整，但是您应该能够使用clip-path在另一个div上创建一个三角形，然后在{{1} }，将其置于三角形的前面。

z-index

::before