我想在html中创建如下图像的推荐

时间:2017-07-02 06:34:11

标签: jquery html

请帮我告诉我如何在html中创建这种类型的推荐。

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以使用CSS伪元素(:before或:after)创建它。我做了一个快速的HTML结构,检查这个JSFiddle

CSS:

.profile {
  width: 200px;
  height: 200px;
  display: block;
  color: rgba(0, 0, 0, 0);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 80px;
  overflow: hidden;
}

.profile::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 393px;
  top: -100px;
  left: -200px;
  z-index: -1;
  background: url(https://cdn.pixabay.com/photo/2017/06/26/15/00/seascape-2444040_640.jpg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

HTML:

<div class="profile">
  <!-- Overlay div content goes here -->
</div>