如何仅使用纯 CSS 制作编辑图标样式？答案

【问题标题】：How can I make the edit icon styling using only pure CSS?如何仅使用纯 CSS 制作编辑图标样式？
【发布时间】：2019-10-07 11:10:44
【问题描述】：

我想用纯 CSS 设计上图。

到目前为止，我只能在没有编辑图标的情况下进行设计。

以下是我目前想出的 HTML 和 CSS：

<div>
    <img src="static\assets\images\avatar.jpg" class="main-profile-img" />
</div>

<style>
    .main-profile-img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
</style>

我只需要右上角编辑图标的 HTML 和 CSS 代码。

【问题讨论】：

但是你需要一些按钮来点击？？（你可以添加到html按钮或a或div）
你有没有编辑图标img，你想知道如何添加它？

标签： html css pure-css

【解决方案1】：

-- 简化版--

我们需要相同的铅笔图标，没有边框，并使用一个 HTML 标记。最终结果：

JSfiddle 演示：https://jsfiddle.net/allenski/tx0zyLr8/（适用于 IE11）。

HTML 代码：

<div class="edit-pencil"></div>

CSS 代码：

.edit-pencil {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 36px;
    vertical-align: middle;
    cursor: pointer;
}
.edit-pencil:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-2px, -3px) rotate(-45deg);
    width: 3px;
    height: 5px;
    background-color: #7081a3;
    box-shadow: 1px 0px 0px #7081a3, 2px 0px 0px #7081a3, 3px 0px 0px #7081a3, -1px 0px 0px #7081a3, -2px 0px 0px #7081a3, -3px 0px 0px #7081a3, -3.3px 0px 0px #7081a3, 7px 0px 0px #7081a3;
    transition: all 300ms;
    content: '';
}
.edit-pencil:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-9px, 3px) rotate(-45deg);
    font-size: 1px;
    border: solid 3em transparent;
    border-left-width: 0;
    border-right-width: 5em;
    border-right-color: #7081a3;
    transition: all 300ms;
    content: '';
}
.edit-pencil:hover:before {
    background-color: #333333;
    box-shadow: 1px 0px 0px #333333, 2px 0px 0px #333333, 3px 0px 0px #333333, -1px 0px 0px #333333, -2px 0px 0px #333333, -3px 0px 0px #333333, -3.3px 0px 0px #333333, 7px 0px 0px #333333;
}
.edit-pencil:hover:after {
    border-right-color: #333333;
}

【讨论】：

【解决方案2】：

将inner span 用作position:absolute

.user {
  width: 140px;
  height: 140px;
  border-radius: 100%;
  border:2px solid #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
  position:relative;
}

.user img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

span.icon {
  position: absolute;
  top: 10px;
  right: 0;
  background:#e2e2e2;
  border-radius:100%;
  width:30px;
  height:30px;
  line-height:30px;
  vertical-align:middle;
  text-align:center;
  color:#0000ff;
  font-size:14px;
  cursor:pointer;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<div class="user">
  <img src="https://cdn.pixabay.com/photo/2014/04/03/10/32/businessman-310819_960_720.png" class="main-profile-img" />
  <span class="icon"><i class="fa fa-edit"></i></span>
</div>

【讨论】：

【解决方案3】：

div {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border-style: solid;
  border-color: #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
  position: relative;
}

div img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

div i {
  position: absolute;
  top: 20px;
  right: -7px;
  /* border: 1px solid; */
  border-radius: 50%;
  /* padding: 11px; */
  height: 30px;
  width: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: cornflowerblue;
  box-shadow: 0 0 8px 3px #B8B8B8;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<div>
  <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" class="main-profile-img" />
  <i class="fa fa-edit"></i>
</div>

【讨论】：

【解决方案4】：

使用您的 html：

使用伪元素作为:after（我仅在示例中使用font awesome）

.main-profile-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border-style: solid;
  border-color: #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
   position: relative;
}

.wrap {
  position: relative;
}

.wrap:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f044";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid grey;
top: 0;
left: 113px;
background: white;
color: blue;
align-items: center;
display: flex;
justify-content: center;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<div class="wrap">
  <img src="https://i.stack.imgur.com/mSXoO.png" class="main-profile-img" />
</div>

更改您的 html：

.main-profile-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border-style: solid;
  border-color: #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
  position: relative;
}

.wrap {
  position: relative;
}

button {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid grey;
  top: 0;
  left: 113px;
  background: white;
  color: blue;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<div class="wrap">
  <img src="https://i.stack.imgur.com/mSXoO.png" class="main-profile-img" />
  <button><i class="fas fa-edit"></i></button>
</div>

【讨论】：

告诉我更多帮助

【解决方案5】：

此处为 HTML 代码

<div>
<figure>
    <img src="https://image.shutterstock.com/image-vector/male-avatar-profile-picture-vector-260nw-221431012.jpg" class="main-profile-img" />
    <img class="editIcon" src="data:image/png;base64,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" />
    </figure>
</div>

这里是 CSS 代码

figure{
  width: 140px;
  height: 140px;
  position: relative;
}
    .main-profile-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
    .editIcon{
      position: absolute;
      right: -10px;
      top: 0px;
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 100%;
      box-shadow: 0 0 8px 3px #B8B8B8
    }

小提琴链接

https://jsfiddle.net/Lrgexwc4/1/

【讨论】：

【解决方案6】：

您可以尝试将position: absolute; 添加到编辑图标。测试代码如下。希望它能解决我们的问题

HTML

<div>
  <img src="static\assets\images\avatar.jpg" class="main-profile-img" />
</div>

<div class="edit-icon">
 <img src="static\assets\images\avatar.jpg"/>
</div>

CSS

 .main-profile-img {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   border-style: solid;
   border-color: #FFFFFF;
   box-shadow: 0 0 8px 3px #B8B8B8;
 }

.edit-icon {
    position: absolute;
    top: 15px;
    left: 120px;
    z-index: 1;
    border-radius: 50%;
}

JS Fiddle 链接：https://jsfiddle.net/SJ_KIllshot/wh0usc2y/

【讨论】：