cssを使ってdivに背景として三角形を含める必要があります。

divの右上隅に三角形を追加し、テキストを上に移動する必要があります。イメージを使わずに簡単なCSSでこれを達成できますか？

2017-11-13 Kumar

はい。普通のCSSを使って実現できます。 –

ねえ。サンプルコードを与えてください。 – Kumar

あなたが試したこととどこにいるのかを示す前に –

あなたはスニペットの下にチェックボックスに擬似要素を追加した後、境界が三角形を作成使用して試すことができます：

.box{ 
 
    width: 500px; 
 
    height: 300px; 
 
    background: #233058; 
 
    padding: 20px 40px; 
 
    position: relative; 
 
    z-index:-1; 
 
} 
 

 
.box:before{ 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    background: transparent; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
    display: block; 
 
    z-index: 100; 
 
    border-left: 80px solid transparent; 
 
    border-bottom: 150px solid transparent; 
 
    border-right: 150px solid rgba(70, 88, 158, .5); 
 
    border-top: 80px solid rgba(70, 88, 158, .5); 
 
    z-index: 0; 
 
} 
 

 
h1, P{ 
 
    color: white; 
 
    font-family: Arial; 
 
    font-weight: lighter; 
 
    position: relative; 
 
    z-index: 999; 
 
} 
 

 
p{ 
 
font: 1.5em sans-serif; 
 
}

<div class="box"> 
 
    <h1>Request and instance</h1> 
 
    <p>Need to add the triangle to the top right corner of a div and make text flow over it. </p> 
 
</div>

出典

2017-11-13 05:42:27

これはあなたがAkashに与えた最も単純で簡単な解決策です。うまくいく。 – Kumar

コンテナ内に擬似要素を追加したり、追加のdivをネストしたりすると、テキストの右上に三角形が表示されます。

あなたが必要とするCSSの例については、https://css-tricks.com/examples/ShapesOfCSS/を参照してください。

出典

2017-11-13 05:10:08

上記のリンクの前にAnsonを提案しました。問題はそれが境界を使っているので、私のテキストがその上に重なっていないからです。 – Kumar

三角形のdivを追加して絶対配置すると、目的の効果を得ることができます。だからあなたのHTMLは、ボックスの外側のdiv、アイコンのdiv、テキストのdiv、および三角形のdivを持ちます。 –

私はこれがあなたが探していることを願っています。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 450px; 
 
    margin: 0 auto; 
 
    background-color: #777777; 
 
} 
 

 
.inner { 
 
    padding: 40px; 
 
    position: relative; 
 
} 
 

 
.text-area { 
 
    display: flex; 
 
    z-index: 10; 
 
} 
 

 
.text-area i { 
 
    font-size: 60px; 
 
    color: #ffffff; 
 
    margin-right: 20px; 
 
} 
 

 
.text-area p { 
 
    z-index: 99; 
 
} 
 

 
.text-area:after { 
 
    content: ""; 
 
    display: block; 
 
    background-color: rgba(255, 255, 255, 0.32); 
 
    width: 150px; 
 
    height: 304px; 
 
    position: absolute; 
 
    top: -75px; 
 
    right: -73px; 
 
    transform: rotate(150deg); 
 
    z-index: 0; 
 
}

<head> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
</head> 
 
<div class="container"> 
 
    <div class="inner"> 
 
    <div class="text-area"> 
 
     <i class="fa fa-compass" aria-hidden="true"></i> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-11-13 05:32:08

cssを使ってdivに背景として三角形を含める必要があります。

答えて

関連する問題