Comment utiliser CSS pour dessiner des triangles directement et sous forme de dialogue (code ci-joint)

Le contenu de cet article explique comment utiliser CSS pour dessiner directement des triangles et des triangles sous forme de dialogue (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. . a aidé.

Dans les présentations de produits, des triangles apparaissent souvent, comme l'étiquette triangulaire dans le coin supérieur gauche, ou le triangle en forme de dialogue, avec un effet d'ombre, etc. Je vais l'enregistrer ici

1 , Ajouter des triangles directement

<div>
    <div>
        <div></div>
        <div>想你呦</div>
    </div>
</div>
<style>
    body {
        background: #e5e5e5;
    }
    .triangleContainer {
        margin: 50px auto;
        width: 500px;
        height: 400px;
        background: #fff;
    }
    .triangleContent {
        position: relative;
    }
    .triangle {
        position: absolute;
        right: -70px;
        top: -70px;
        transform: rotate(45deg);
        /* 比较长的写法 */
        /*border-top: 70px solid transparent;*/
        /*border-bottom: 70px solid red;*/
        /*border-left: 70px solid transparent;*/
        /*border-right: 70px solid transparent;*/
        /* 简单写法 */
        border: 70px solid transparent;
        border-bottom-color: red;
    }
    .title {
        position: absolute;
        right: 8px;
        top: 17px;
        transform: rotate(45deg);
        font-size: 19px;
        color: #fff;
    }
</style>

2. Utiliser des pseudo-classes pour ajouter des triangles (avec effet d'ombre)

Ajouter deux pseudo- classes : une implémentation de pseudo-classe Triangle, l'autre utilise le positionnement pour obtenir un effet d'ombre

<view>
  <text>邀请越多的好友，中奖几率越高哦！</text>
  <text>我知道了</text>
</view>
.promptInfo{
  position: absolute;
  left: 5%;
  top: -28rpx;
  margin: 0 auto;
  padding: 20rpx 0;
  box-sizing: border-box;
  width: 88%;
  border-radius: 10rpx;
  z-index: 999;
  background: #fff;
  box-shadow: 3rpx 3rpx 3rpx rgba(0,0,0,.2);
  border: 0;
  font-size: 30rpx;
}
/* 添加与阴影颜色相同来形成三角形的阴影效果 */
.promptInfo::before{
  position: absolute;
  bottom: -21rpx;
  right: 110rpx;
  z-index: 999;
  border-top: 20rpx solid rgba(0,0,0,.2);
  border-left: 20rpx solid transparent;
  border-right: 20rpx solid transparent;
  content: ""
}
.promptInfo::after{
  position: absolute;
  bottom: -17rpx;
  right: 110rpx;
  z-index: 999;
  border-top: 20rpx solid #fff;
  border-left: 20rpx solid transparent;
  border-right: 20rpx solid transparent;
  content: ""
}
.promptInfo .inviteMessage{
  padding-left: 30rpx; 
}
.promptInfo .clickMessage {
  display: inline-block;
  margin-left: 15rpx;
  padding: 10rpx 20rpx;
  color: #fff;
  background: red;
  border-radius: 30rpx;
}

Recommandations associées :

css pour créer triangles, liste déroulante triangle_html/css_WEB -ITnose

Utilisez div+css pour implémenter un triangle, avec des mots à l'intérieur du triangle_html/css_WEB-ITnose

Méthodes CSS pour implémenter des triangles arrondis

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!