在CSS中添加具有透明背景的图像边框

Question

I'm converting a PSD to HTML and having trouble with a border. Is there any way to add a border to an image with transparent background? Let's say for example I have this image.

And so there's a caret on the image and I want to do something like this.(See below):

How can I make the white border in the image?

Answer 1

You can use a png image with transparent background.

http://jsfiddle.net/BWxfv/

#caret {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

Answer 2

Here's a way using an extra (required unfortunately) element and a bunch of pseudo elements.

I've used different colors so you can see the two 'caret's.

Codepen Demo

HTML

<div class="wrapper">
  <img src="http://lorempixel.com/output/nightlife-q-c-500-200-9.jpg" alt="" />
  <div class="main">
    <div class="caret-border"></div> <!---extra div -->
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: lightgrey;
}

.wrapper {
  width:650px;
  margin: 10px auto;
  border:1px solid grey;
}

.wrapper img {
  display: block;
  width:100%;
  height:auto;
}

.main {
  position: relative;
  min-height:150px;
  background: #bada55;
}
.main:before,
.main:after {
  position: absolute;
  content:"";
  height:0;
  width:calc(50% - 16px);
  height:0px;
  transform:translateY(-100%);
  //top:-16px;
  z-index:2;
  border-style:solid;

}

.main:before {
  left:0;
  border-width: 0px 16px 16px 0;
  border-color:transparent transparent green transparent;
}

.main:after {
  right:0;
  border-width: 0px 0px 16px 16px;
  border-color:transparent transparent green transparent;
}

.caret-border {
  height:0px;
  background: red;
  position: absolute;
  width:100%;

}

.caret-border:before,
.caret-border:after{
  position: absolute;
  content:"";
  height:0px;
  top:0;
  width:calc(50% - 14px);
  z-index:1;
  border-style:solid;
  transform:translateY(-100%);
  //top:-18px;
}

.caret-border:before {
  left:0;
  border-width: 0px 16px 18px 0;
  border-color:transparent transparent white transparent;
}

.caret-border:after{
  right:0;
  border-width: 0px 0px 18px 16px;
  border-color:transparent transparent white transparent;
}