时间戳

首页 > 解决方案 > 我可以将框阴影自定义为图像后面的三角形吗？

html - 我可以将框阴影自定义为图像后面的三角形吗？

问题描述

我正在尝试自定义一个盒子阴影，使其形状像图像后面的三角形。像这样：

但我不知道是否有办法使用盒子阴影来做到这一点。

到目前为止，这是我的代码。

#image{
      width: 200px;
      box-shadow: -10px 10px  #ff9900;
        }
<img src="https://placeimg.com/200/180/any" id="image" />

标签： htmlcss

解决方案

一个简单的渐变边框就可以了，它会响应：

#image {
  border: 10px solid transparent;
  border-image: linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%) 10;
}
<img src="https://placeimg.com/180/150/any" id="image" />
<img src="https://placeimg.com/250/150/any" id="image" />

几乎相同，但有背景：

.box{
  width:200px;
  height:150px;
  padding:10px; /*control the space*/
  background: 
    url(https://placeimg.com/180/150/any) center/cover content-box,
    linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%);
}
<div class="box"></div>

推荐阅读