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

wecizke3  于 2023-06-20  发布在  Ionic
关注(0)|答案(1)|浏览(148)

我想用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来实现这个功能,但还是不行。

gjmwrych

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会更好。

相关问题