时间戳

首页 > 解决方案 > CSS图像卡在角落

html - CSS图像卡在角落

问题描述

在这张照片中，我使用 CSS 添加了一个 div箭头，然后将它变成了一个箭头。在 div/箭头的中心，我需要放置一个图像。

在此处输入图像描述

网格内的此图标不会将位置更改为中心，而不会干扰使用网格创建的箭头的 css。

.arrow {
  position: relative;
  text-indent: 30px;
  text-align: center;
  background-color: #E6EAEF;
  display: inline-block;
  zoom: 1;
  *display: inline;
  font-size: 1rem;
  text-align: center;
  padding: auto 0;
  align-items: center;
  height: 24px;
  margin: 5px;
  padding: 5px;
  /* tweaked this */
  font-size: 1rem;
  line-height: 50px;
  box-shadow: 0 8px 6px -6px black;
}

.arrow:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-top: 17px solid transparent;
  border-left: 12px solid #E6EAEF;
  border-bottom: 17px solid transparent;
  margin: -5px 10px 0 5px;
}

.arrow:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-top: 17px solid transparent;
  border-left: 10px solid white;
  border-bottom: 17px solid transparent;
  margin: -5px 0 0 0;
}

.arrow-icon {
  display: inline-block;
  position: relative;
  margin-top: 0px;
  margin-left: 0px;
  padding-left: 0px;
  height: 15px !important;
}
<div class="arrow">
  <img class="arrow-icon" src="https://www.freeiconspng.com/uploads/magnifying-glass-icon-13.png" alt="">
</div>
`

标签： htmlcss

解决方案

如果图像没有动作目的，例如点击事件，并且仅用于显示目的，您可以将其放置在背景中。

.arrow {
  position: relative;
  text-indent: 30px;
  text-align: center;
  /* All background properties are combined in here. */
  /* The CALC() is just to nudge it to the right so it looks better on the arrow. */
  background: #E6EAEF url(https://www.freeiconspng.com/uploads/magnifying-glass-icon-13.png) calc(50% + 4px) 50% no-repeat;
  background-size: 17px; /* Sets the icon size. */
  display: inline-block;
  zoom: 1;
  *display: inline;
  font-size: 1rem;
  text-align: center;
  padding: auto 0;
  align-items: center;
  height: 24px;
  margin: 5px;
  padding: 5px;
  /* tweaked this */
  font-size: 1rem;
  line-height: 50px;
  box-shadow: 0 8px 6px -6px black;
  width: 50px;
}

.arrow::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: -20px;
  border-top: 17px solid transparent;
  border-left: 12px solid #E6EAEF;
  border-bottom: 17px solid transparent;
  margin: -5px 10px 0 5px;
}

.arrow::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-top: 17px solid transparent;
  border-left: 10px solid white;
  border-bottom: 17px solid transparent;
  margin: -5px 0 0 0;
  
}
<div class="arrow">
</div>

推荐阅读