So zeichnen Sie Dreiecke direkt und in Dialogform mit CSS (Code im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS zum direkten Zeichnen von Dreiecken (mit Code). Ich hoffe, dass er für Sie hilfreich ist . hat geholfen.

In Produktanzeigen erscheinen oft Dreiecke, wie zum Beispiel die Dreiecksbeschriftung in der oberen linken Ecke, oder das Dreieck in Form eines Dialogs, mit Schatteneffekt usw. Ich werde es hier aufzeichnen

1, Dreiecke direkt hinzufügen

<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. Verwenden Sie Pseudoklassen, um Dreiecke hinzuzufügen (mit Schatteneffekt)

Fügen Sie zwei Pseudoklassen hinzu: Eine Pseudoklasse implementiert Dreiecke. Eine andere Verwendung der Positionierung, um einen Schatteneffekt zu erzielen. down box Triangle_html/css_WEB-ITnose

Verwenden Sie div+css, um das Dreieck zu implementieren, mit den Wörtern _html/css_WEB-ITnose innerhalb des Dreiecks

CSS zur Implementierung der abgerundeten Dreiecksmethode

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Dreiecke direkt und in Dialogform mit CSS (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!