相关疑难解决方法(0)

我应该使用<img>,<object>或<embed>加载SVG文件到一个页面类似于加载的方式jpg,gif还是png？

每个代码的代码是什么,以确保它尽可能地工作？(我在我的研究中看到了包括mimetype或指向后备SVG渲染器的参考,并没有看到一个很好的最新参考).

假设我正在检查与Modernizr的 SVG支持,并<img>为不支持SVG的浏览器退回(可能用普通标签替换).

是否可以设置与宽度相同的高度(比例1:1)？

例

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

我刚刚遇到了一个巧妙的CSS技巧.看看小提琴......

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

这会产生一个小箭头/三角形效果,一个"工具提示尾巴".这让我大吃一惊!我真的很想知道它是如何工作的？!

此外,有没有办法扩展这个CSS技巧来创建一个效果,如下所示:

这是一个有趣的问题.这可以仅使用CSS来完成,暂时忽略阴影吗？

更新1

我想出了我最初问题的解决方案.这是小提琴......

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff …

我试图在CSS中重新制作闪电符号(DC Comics)(或Big Bang Theory的Sheldon Cooper 所穿的T恤).

这将像星级评级系统,只是一个"闪电评级系统".

但是,因为我试图将HTML保持在最低限度,所以我只想在CSS中设置这个样式.

我到了以下阶段:

html,
body {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
.wrap {
  height: 50vw;
  width: 50vw;
  position: relative;
  margin: 0 auto;
}
.circ:hover{
  background:gray;
  }
.circ:hover .bolt{
  background:gold;
  }
.circ {
  height: 50%;
  width: 50%;
  background: white;
  border: 5px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:0 0 10px 2px black; …

我想在图像上做一个透明的箭头.此三角形应缩进半透明块并显示背景图像.

期望的输出:

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}

<div class="barShow"></div>

该透明CSS箭应该是没有颜色的透明.

我找到了概述版本,但我想要坚实的版本.

有谁知道这些实体？

我见过以下例子:

.arrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
}
.arrow.up {
   border-bottom-color: #000;
}
.arrow.down {
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/

但是我无法理解它是如何创造箭头的.有人可以帮我解释一下吗？

下面的代码将在<a>元素正下方创建一个箭头:

的jsfiddle

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

<a href="#" class="btn">Hello!</a>

问题是我们必须指示链接宽度以获得适当大小的箭头,因为我们无法以像素为单位指示边框宽度.

如何制作响应三角形百分比？

对于border-bottom和border-right属性,我有一个不同颜色的div.因此,它们通过一条线分开,使盒子呈45度角.

如何使底部边框更短,以便右边框一直到元素的底部,这将产生90度角分隔线？

我正在使用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之间没有间隙.我试图通过浮动元素来做到这一点,但没有成功.