带有背景图像的CSS三角形[重复]

Posted

技术标签:

【中文标题】带有背景图像的CSS三角形[重复]【英文标题】:CSS triangle with background image [duplicate] 【发布时间】:2013-07-16 02:06:05 【问题描述】:

尊敬的***ers,

如何创建带有背景图案的三角形元素?

例如,我需要这样的 div:

但我的状态是这样的:

所有带有三角形元素的示例都使用边框,其中不能有 img ....

这是我需要coolarrow的小节类:

<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div>

.subsection 
  .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));
  background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern
  display: block;
  clear: both;
  float: left;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  display: none;

.subsection 
    position:relative;

.subsection:before 
    content:'';
    position:absolute;
    top:0;
    left:0;
    height:20px;
    width:0;
    border-left:20px solid white;
    border-bottom:16px solid transparent;

.subsection:after 
    content:'';
    position:absolute;
    top:36px;
    left:0;
    bottom:0;
    width:0;
    border-left:20px solid white;
    border-top:16px solid transparent;

我得到了:

这很好......我怎样才能以所需的形式将箭头放在顶部? ...并覆盖案例 div ? ... 谢谢。

【问题讨论】:

我认为这个问题回答了类似的问题***.com/questions/11379085/… 不,它不是重复的......需要有一个形状但有图像背景的图像......而不是从边框输入的颜色...... 你会考虑使用 SVG 而不是 CSS 吗?可能会更容易。 【参考方案1】:

如果您不关心跨浏览器的兼容性,您可以使用旋转 45 度的伪元素并将样式附加到它。你唯一需要的就是背景,旋转(向后)45度以附加到伪元素:

div.coolarrow:before 
    content: '';
    position: absolute;
    z-index: -1;
    top: -24.7px;
    left: 10px;
    background-color: #bada55;
    width: 50px;
    height: 50px;

    background: url(url/to/your/45deg/rotated/background.gif);

    box-shadow: inset 0 0 10px #000000;
    transform: rotate(45deg); 

这里有一个简短的说明(没有背景):Fiddle

要解决除 90 度箭头以外的其他情况,您需要额外倾斜矩形。而且我真的不知道背景图片会发生什么......

【讨论】:

谢谢……请看我的更新……我从你那里得到了一些想法……【参考方案2】:

将图像作为 div 的背景,并将边距设置为负值,使其覆盖在栏上。示例(尽管估计,但我绝不声称这行得通)将是 margin-left: -20px;边距顶部:-20px;并将其放在行后。

或者使用@Py 的答案,您可以使用此 CSS 作为箭头,并使用相同的负边距使其对齐。

#triangle-up  width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px;  

【讨论】:

谢谢......请看我的更新...... 要将其置于顶部,请在箭头 div 的 CSS 类中添加 margin-top: -10px(更改 10 以查看适合您的需要)。 没有箭头类了....使用before和after的伪元素...我已经发布了整个css...你可以看看...谢谢 添加 margin-top: -10px 到刚刚增加侧面之后...不是箭头的位置...它仍然在左侧..dosent 指向顶部...跨度> 我作为答案发布的代码将使箭头指向上方。【参考方案3】:

继续http://apps.eky.hk/css-triangle-generator/ 并生成它:D

#triangle 
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 

【讨论】:

以上是关于带有背景图像的CSS三角形[重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何在不使用边框和图像的情况下在 div 上制作 CSS 三角形背景? [复制]

带背景图像的三角形

CSS三角形自定义边框颜色

创建不改变css中角度的三角形

创建具有重复背景图像的响应式三角形

CSS从中心旋转三角形[重复]