CSS三角形和IMG

Posted 2023-03-06

【中文标题】CSS三角形和IMG

【英文标题】：CSS triangle over and IMG

【发布时间】：2015-01-13 14:16:22

【问题描述】：

我正在尝试做你在这张图片顶部看到的三角形部分：

我尝试了几种方法都没有成功。

如果图像改变大小，我需要三角形做出响应。 而且我不希望容器 div 因为三角形而扩展。 但我无法修复 div 高度，因为如果图像大小发生变化，它也会发生变化。 我不想在 photoshop 中制作三角形并导出图像，因为当您单击它时，您也会看到三角形。

知道如何以正确的方式实现这一目标吗？

这是我尝试过的：

http://jsfiddle.net/37uufbg3/

.arrow-down 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
    border-top: 20px solid #f00;

.image
    width:100%;


<div class="imageTriangle">
    <img src="image.jpg">
    <div class="arrow-down"></div>
</div>

【问题讨论】：

请提供一些关于jsbin等的示例页面。

jsfiddle.net/37uufbg3

图片上有透明三角形的相关问题：***.com/questions/23758922/transparent-arrow-triangle

【参考方案1】：

对图像使用伪元素:after

演示 - http://jsfiddle.net/victor_007/dvv7bg76/

这个例子不适用于 ie8

.image:after 
    content:'';
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
    border-top: 20px solid #f00;
    position:absolute;
    left:50%;
    top:0;
    transform:translatex(-50%); /** making it horizontally center **/

或者对于较旧的浏览器，您也可以使用它

演示 - http://jsfiddle.net/victor_007/dvv7bg76/1/

这将适用于 ie8

.image:after 
    content:'';
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-20px; /** for older browsers **/

【讨论】：

非常感谢。太棒了。你现在是学习CSS的好地方。每周我都会面对一个我没有答案的新情况。在线培训网站 ...

【参考方案2】：

试试这个

.arrow-down 
  position:absolute;
  top:0;
  left:50%;
  width:0; 
  height:0; 
  border-left:20px solid transparent;
  border-right:20px solid transparent;   
  border-top:20px solid black;

.image
  position:absolute;
  top:0;
  left:0;
  width:100%;

img
  width:100%;

<div class="image">
   <img src="http://lorempixel.com/400/200/">
   <div class="arrow-down"></div>
</div>

如果我需要进一步澄清，请添加评论。