我正在尝试删除我正在用作可拖动元素上的关闭图标的材质图标周围的环。
这是元素的图片(为了将问题突出显示,我将背景更改为红色),我想删除红色的外部圆圈,以便元素的漂亮边框一直延伸到元素的边缘灰色圆圈:
以下是元素和图标的HTML和CSS:
HTML:
<div class="print-element">
Tag Number
<mat-icon class="resize-circle">highlight_off</mat-icon>
</div>
CSS:
.print-element {
min-width: 175px;
min-height: 45px;
border: solid 1px #ccc;
color: rgba(0,0.87);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px 25px 15px 0px;
cursor: move;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 10px 50px 10px 10px;
transition: box-shadow 200ms cubic-bezier(0,0.2,1);
box-shadow: 0 3px 1px -2px rgba(0,0.2),0 2px 2px 0 rgba(0,0.14),0 1px 5px 0 rgba(0,0.12);
}
.resize-circle{
position: absolute;
top: -10px;
right: -10px;
background-color: white;
border: .1px solid white;
border-radius: 50%;
color: #aaa;
cursor: pointer;
}
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
现在我可以更改mat-icon的大小,但是结果如下:
使用:
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 20px;
width: 20px;
}
产量:
这里已经完成了所有的准备工作,准备就绪:https://stackblitz.com/edit/angular-m7wwvr?file=src%2Fstyles.scss
这就是我想要的样子:
即使指针指向正确的方向也会有所帮助。