相关疑难解决方法(0)

我正在尝试将背景图像放在使用CSS边框创建三角形的div上.这是我目前的努力.它适用于纯色,但在图像方面我很茫然.

HTML

<div class="wrapper">
  <div class="left triangle"></div>
  <div class="right triangle"></div>
</div>

CSS

.wrapper {
  padding:50px 0px;
  height: 50px;
  position: relative;
  width: 300px;
  background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg");
}

.triangle {
  border-bottom: 50px solid #eee;
  width: 50px;
  position: absolute;
  bottom: 0;
}

.right {
    right: 0;
    border-left: 100px solid transparent;
}

.left {
    left: 0;
    border-right: 100px solid transparent;
}

jsfiddle:http://jsfiddle.net/aRS5g/9/

那么,看看那个JS小提琴,我怎么能让那个灰色部分也成为我选择的图像背景,而不是必须使用#111,#eee等颜色.

现在,我看到许多主题使用放在div上的三角形/箭头蒙版

你可以看到它在这里通过视频

但是如果可能的话,我想做一个倒(负)边界半径,形成一个半圆,有点像这样

我几乎在那里有径向渐变,但它在Chrome中看起来很尖锐.

http://jsfiddle.net/EjE7c/2457/

.haflcircle {
    background:
        -moz-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px),
        -moz-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px);
    background:
         -o-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px),
         -o-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px);
    background:
         -webkit-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px),
         -webkit-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px);
}

.haflcircle {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    height:50px; …

好的,我正在尝试复制您在页面底部看到的效果,并使用回到顶部按钮:http://www.ppp-templates.de/tilability/ - 在我们停留的内容区域之后连接的.

基本上他正在使用背景图像,我想用CSS复制它并保持相同的效果.

我知道如何使用带边框的CSS创建三角形,但在我的情况下,我想使用透明的bg图像而不是颜色,所以我不能使用边框

我删除了背景图像和对整个DIV使用#FFF,所以它是全白的,现在......我创建了一个新的div中,我加入了返回顶部按钮,增加的背景:透明的它,因此它是透明的,但怎么办我通过CSS创建三角形？

任何帮助是极大的赞赏.

我想创建三角形,如图所示.有人知道如何实现这种效果吗？

我正在尝试使用具有向下箭头的底部边框来设置div .div将在其中包含图像,并且不应具有顶部,右侧或左侧边框.向下箭头的填充应与div或透明相同.

我已经能够使用以下代码使其大部分工作:

.hero {
  position: relative;
  background-color: yellow;
  height: 320px !important;
  width: 100% !important;
  border-bottom: 1px solid red;
}
.hero:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 50px #e15915;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}

<div class="hero"></div>

看到这个小提琴:http://jsfiddle.net/alisamii/tjep3h8t/

无论我试图做什么来"镂空"箭头要么导致无边框div(所以它有一个黄色的填充但任何一侧没有边框)或在一个围绕整个div的边界.

有帮助吗？

我需要使用CSS绘制以下模式作为页面各部分之间的分隔符:

使用这个答案的skewX()技术,我能够准确地模仿三角形切口(两个伪元素附加到下部的顶部,一个向左倾斜,一个向右倾斜,因此上部的背景显示通过) :

但我无法弄清楚如何添加边框,如第一张图片所示.

问题是边框和下部之间的间隙必须是透明的,因为上部的背景可以是渐变,图像等.因此,我不能简单地使用图像作为三角形切口,因为我不知道它背后会有什么内容.

有没有办法用CSS做到这一点？

对不起,如果这已经回答,但我无法在任何地方找到它!

我需要一个透明的三角形切出一个白色div(形成一个向下的箭头),我知道它可能是css形状来做它,但我难倒的是如何创建两个100%宽度的白色块任何一边...

像这样:

任何帮助都会很棒.

非常感谢

我有这个问题,我无法弄清楚如何使箭头透明.

所以基本上我只是用:after做一个border与这些值来做出一个箭头.但我想要的是使箭头透明,这样你就可以看到背景图像,这是header标签中的背景图像.

CSS:

html,body {
    width:100%;
    height:auto;
    font-family:'open-sans', sans-serif;
}
header {width:100%;}
main {
    width:100%;
    min-height:50vh;
    position:relative;
}
main:after {
    top:0;
    left:50%;
    border:solid transparent; 
    content:""; 
    height:0; 
    width:0; 
    position:absolute; 
    border-color: rgba(0, 0, 0, 0); 
    border-top-color:#2a2a2a; 
    border-width:60px; 
    margin-left: -60px;
}

HTML:

    <header class="bg__header">
    </header>
    <main>
        <article></article>
    </main>

小提琴

这里是我想要实现的一个很好的例子:

我知道简单地在元素的底部添加一个小三角形很容易,但我希望背景图像延伸到三角形中.我怎么能实现这个目标？

我正在尝试基于图像模型在元素上添加一些 css3 样式。

左侧带蓝色边框的内部透明箭头：

图片链接

只能使用 css3 吗？

我想用CSS创建如下效果，最初，我想合并两个带圆角的矩形，但我不能用那种方式，因为它是一个锐角，不是圆角，看看圆形区域，这个是最难的部分。

所以我这样做：
1. 创建一个圆角矩形作为轮廓。边框颜色为灰色。
2. 在矩形左侧的中心创建一个灰色三角形。
3. 创建另一个白色的三角形，覆盖第 2 步中的灰色三角形，稍微偏移，使其看起来像矩形的边框。

这是效果：

我的问题是：
1. 如何添加正确的部分？似乎我只能在 CSS 选择器 :before 或 :after 中同时绘制一个形状。
2.如果我想添加边框阴影效果怎么办？如果我添加矩形的阴影，会出现白色三角形，它很难看。
3. 或者有什么其他方法可以实现这个效果？

这是代码：

.triangle_left {
  width: 600px;
  height: 600px;
  position: relative;
  margin: 20px auto;
  border: 2px solid #cccccc;
  /* box-shadow: 0px 0px 8px 1px darkgrey; */
  border-radius: 20px;
}

.triangle_left:before {
  content: '';
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left-color: #cccccc;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -20px;
}

.triangle_left:after {
  content: '';
  width: 0;
  height: …