相关疑难解决方法(0)

在CSS Tricks上有很多不同的CSS形状- CSS的形状,我特别对三角形感到困惑:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

它是如何以及为什么有效？

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

我正在使用bootstrap,试图使div之前有一个CSS三角形.

http://jsfiddle.net/B2XvZ/11/

这是我的非工作代码:

.d:before {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #dd4397 transparent transparent;  
}

我希望它的样子是在文本"this"之前有一个粉红色的左指三角形,它与div之间没有间隙.我试图通过浮动元素来做到这一点,但没有成功.

是否可以使用css绘制一个围绕它的半透明边框的箭头？

到目前为止,这是我努力的一个小提琴:http: //jsfiddle.net/calebo/fBW4u/

CSS:

.ui-overlay {
  padding-bottom: 10px;   
  position: relative;
}
.ui-overlay-content { 
  background: #999;
  color: #000;
  padding: 8px;
  border-radius: 4px; 
  border: 5px solid rgba(0, 0, 0, 0.2); 
  background-clip: padding-box; 
  height: 100px;
  width: 200px;
}
.arrow {
  border-color: #999 transparent transparent; 
  border-style: solid; 
  border-width: 10px 10px 0; 
  bottom: 5px; 
  left: 15px; 
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden; 
}

在图像底部创建箭头很简单.

但是,如果第二张图像不是背景而是第一张图像之后的另一张图像,这是否可能达到这样的效果:

我在codepen.io上创建了"pen"

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height: 200px;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.arrow:before,
.arrow:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  box-sizing: border-box;
}
.arrow:before {
  right: 50%;
  border-bottom: 20px solid #000;
  border-right: 20px solid transparent;
}
.arrow:after {
  left: 50%;
  border-bottom: 20px solid #000;
  border-left: 20px solid transparent;
}

<div …

有可能创建这样的东西:

因为现在我有这样的东西:https: //jsfiddle.net/38kjb5us/

<div class="dropdown-content"></div>


body{
  background-image: url('//ssl.gstatic.com/gb/images/v1_76783e20.png');
}
.dropdown-content{
 display: inline-block;
 padding: 18px 14px;
 border: 1px solid #ffffff;
 min-width: 160px;
 position: relative;
 box-shadow: 0 0 10px #000000;
 margin: 15px;
}
.dropdown-content:before{
    position: absolute;
    content: "";
    border: 1px solid #ffffff;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #ffffff transparent;
    top: -12px;
 }

我不知道如何在透明容器中添加带边框的箭头(((

可能吗？如果是,那怎么样？

是否可以在CSS中制作类似的东西？我想要标题的图像,但我希望下一部分切出三角形,以便上面的图像显示在那里.

我知道如何制作一个带边框的实心CSS三角形(例如:http://www.dailycoding.com/Posts/purely_css_callouts.aspx),但在这种情况下我要么做相反的事情(拿一个"块"在蓝色部分之外",或者使三角形成为与其连接的图像完全对齐的图像.我在想,如果我能把一块"大块"拿出来,那可能会更容易

为了使它更复杂一点,我也将上面的图像设置为background-attachment: fixed和background-size: cover.因此,随着浏览器尺寸变大,图像会缩放.

如果我不能单独使用CSS并且需要图像,那么如果文本在页面上水平居中,我该如何制作正确的图像组合以使三角形与文本保持一致？我正在考虑这样的事情,两个长div的延伸到边缘,一个精确的宽度图像在中间,三角形透明:

_____________________________  ___ ______________________  _________________________
|    (really wide for margin)||   V (960px wide image)   || (really wide box again) |

但是它可以用CSS完成吗？或者是否有一个SVG解决方案(我不熟悉SVG)？我可以使用仅适用于现代浏览器的解决方案,因为这绝对只是"渐进式增强".

我正在尝试创建一个效果,我在CSS3中的任何图像上方都有一个透明箭头.请参见下图.

有什么想法怎么做这个效果？如果有任何帮助,请使用LESS.

我想做一个div,底部有一个三角形.但我需要三角形上的背景图像出现,我尝试使用伪元素(:after)但它不起作用.

#homebg:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #fff;
    border-left: solid 48vw transparent;
    border-right: solid 48vw transparent;
}

我需要div使用background三角形中的图像显示:

好吧,我不知道如何正确解释它.在这里,查看我想要制作的截图.我的设计师给了我这个.如果我找不到解决方案,我将使用图像而不使用代码.用CSS3可以做到这一点吗？

这是图像

看到那个盒子里面的三角形？我想做这个.谢谢!