带有底边三角形的标签

Question

我想在这张照片上实现这样的效果：

但我不确定是否只能使用 CSS 或我是否需要 JS。现在我的标签看起来像这样：

我的css代码：

.label {
position: absolute;
top: 10px;
left: -5px;
z-index: 1;
display: inline-block;
padding: 1px 20px 1px 24px;
background: #F07D31 none repeat scroll 0% 0%;
color: #FFF;
font: 10px/18px "FBold","Helvetica Neue",Helvetica,sans-serif;
text-transform: uppercase;
letter-spacing: 0.015em;
white-space: nowrap;
}

Answer 1

使用 pseudo element 可以轻松实现此效果，不需要您更改 HTML:

中的任何内容

div {
  width:300px;
  height:200px;
  background-color:#f00;
  padding:10px;
}

.label {
 position: absolute;
 top: 10px;
 left: -5px;
 z-index: 1;
 display: inline-block;
 padding: 1px 20px 1px 24px;
 background: #F07D31 none repeat scroll 0% 0%;
 color: #FFF;
 font: 10px/18px "FBold","Helvetica Neue",Helvetica,sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.015em;
 white-space: nowrap;
}
.label:before {
 display:inline-block;
 position:relative;
 margin-bottom:-17px;
 margin-left:-20px;
 content:"";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 10px 10px 0;
 border-color: transparent  #904610 transparent transparent;
}

<div>
 <span class=label>Text goes here</span>
</div>

您基本上是在创建一个 css border triangle 并对其进行定位，以使其具有您想要达到的外观。

Answer 2

定位的 pseudo-element 在这里可以使用 CSS 三角形方法。

我通常在这里使用 em 值和定位而不是负边距。这使得标签可以适应任何文本大小，并且不需要特定的 px 边距值。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  text-align: center;
}
.imgwrap {
  display: inline-block;
  margin: 1em;
  position: relative;
  border: 1px solid grey;
}
.imgwrap img {
  display: block;
}
.label {
  position: absolute;
  top: 1em;
  left: 0;
  margin-left: -.5em;
  z-index: 1;
  display: inline-block;
  padding: .25em 1em;
  background: #F07D31 none repeat scroll 0% 0%;
  color: #FFF;
  font: 1em "FBold", "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  white-space: nowrap;
}
.label:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  left: 0;
  border-style: solid;
  border-width: 0 .5em .5em 0;
  border-color: transparent #f00 transparent transparent;
}

<div class="imgwrap">
  <img src="http://lorempixel.com/400/200/" alt="" />
  <div class="label">My Label</div>
</div>

Answer 3

是的，可以使用一点 CSS3。如果你分解你想要实现的图像，你会发现所有的阴影基本上都是一个较暗的三角形，因此我在 label [=24= 中添加了一个 div ] 作为那个三角形：

.label .triangle {
    position: absolute;
    bottom: -7px;
    left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 7px 0;
    border-color: transparent #98450f transparent transparent;
}

而我使用的HTML是：

<img src="img.jpg" />
<div class="label"><div class="triangle"></div>PHOTOS</div>

产生这个结果：

Answer 4

您可以使用 CSS3 执行此操作。有多种在线工具可以为您执行此操作。使用这些并尝试使用参数看看它是如何完成的。

http://www.css3d.net/ribbon-generator/

另外，这是我快速创建的示例的 JSFiddle：https://jsfiddle.net/3n22m3v6/

HTML

 <div>
  <div class="rectangle">
        </div>
        <div class="triangle-l"></div>
        <div class="triangle-r"></div>
    <img src="" alt="Image here..." />
</div>

CSS

.rectangle {
    background-color: #7f9bd9;
    height: 50px;
    width: 380px;
    position: relative;
    left: -15px;
    top: 30px;
    float: left;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.55);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.55);
    box-shadow: 0 0 4px rgba(0,0,0,0.55);
    z-index: 100;
}

.rectangle h2 {
    font-size: 30px;
    color: #fff;
    padding-top: 6px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.triangle-l {
    border-style: solid;
    border-width: 15px;
    height: 0px;
    width: 0px;
    position: relative;
    left: -30px;
    top: 65px;
    z-index: -1;
    border-color: transparent #7d90a3 transparent transparent;
}

.triangle-r {
    border-style: solid;
    border-width: 15px;
    height: 0px;
    width: 0px;
    position: relative;
    left: 350px;
    top: 35px;
    border-color: transparent transparent transparent #7d90a3;
    z-index: -1;
}

希望这对您有所帮助:)

带有底边三角形的标签

Label with bottom edge triangle

html

css

css-shapes