如何使div在ionic7上插入头像，如下图

wecizke3 于 2023-06-20 发布在 Ionic

关注(0)|答案(1)|浏览(150)

我想用scss在离子7上用离子头像做这个。但我还是不明白。这个怎么做？
Click to see the image
这是我的scss代码

ion-avatar {
  --border-radius: 4px;
  position: absolute;
  width: 88px;
  height: 88px;
  top: 12px;
  ion-avatar::after {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid #00AB9A;
  }
}

这是我的HTML代码

<ion-avatar>
<div>
<img alt="avatar" src="/assets/avatar-equipment.png"/>
</div>
</ion-avatar>

我试着用scss：：before：：after来实现这个功能，但还是不行。

ionic-framework

来源：https://stackoverflow.com/questions/76403496/how-to-make-div-insert-avatar-on-ionic7-like-this-image

1条答案

按热度按时间

gjmwrych1#

像一些变通方法：https://stackblitz.com/edit/angular-ukiyyc

<ion-avatar>
  <img
       alt="Silhouette of a person's head"
       src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
  <div class="corner"></div>
 </ion-avatar> 

 .corner {
   position: relative;
   top: -53px;
   width: 0px;
   height: 0px;
   border-style: solid;
   border-bottom-right-radius: 4px;
   border-width: 0 0px 50px 50px;
   border-color: transparent transparent #00ab9a transparent;
   transform: rotate(90deg);
  }

但是创建单独的自定义angular组件并使用默认的css样式和伪元素：：after会更好。

赞(0）回复(0）举报 2023-06-20

我来回答

如何使div在ionic7上插入头像，如下图

1条答案

相关问题

热门标签

最新问答