时间戳

首页 > 解决方案 > div内的白色CSS箭头

css - div内的白色CSS箭头

问题描述

我正在寻找使用纯 CSS 方式在片段中找到的 HTML 来创建这个白色箭头，而不是编辑任何 HTML 代码。

想要的结果

.foto {
    width: 100%;
    float: left;
    min-height: 215px;
    background:
    linear-gradient(to bottom right,transparent 50%,#fff 0) bottom right/10% 50% no-repeat, linear-gradient(to bottom left,#fff 50%,transparent 0%) top right/10% 50% no-repeat, url(https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg) center/cover
}
<div class="foto bg_fix"><img src="https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg" itemprop="image" width="724" height="230" style="display: none;"></div>

标签： csslinear-gradients

解决方案

您可以像下面这样校正渐变。你几乎很好，只需切换将底部放在顶部和顶部放在底部的位置：

.foto {
    min-height: 200px;
    background:
      linear-gradient(to bottom right,transparent 49.8%,#fff 50%) top right/10% 50%,
      linear-gradient(to top right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
        url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
     background-repeat:no-repeat;
}
<div class="foto bg_fix" ></div>

推荐阅读