−フキダシ−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

フキダシの基本１

https://bagelee.com/design/css/css-triangle/

【HTML】
<div class="voice-block left-padd">
<div class="left-box">
<img src="https://cyp-design.com/lp/wp-content/plugins/my-snow-monkey/img/voice1.png" />
</div>
<div class="left-box"><div class="triangle2"></div></div>
<div class="left-box">
<div class="balloon1-left">
<p>分かりやすい理解しやすい</p>
<p>★★★★★</p>
<p>読みやすく名刺の奥深さが伝わってきました。<br>
名刺で全てが分かる、ですね。</p>
</div>
</div>
</div>

<div class="voice-block right-padd">
<div class="right-box">
<div class="balloon1-right">
<p>どうやって自分をブランディングすればいいか、わからない経営者さんは絶対読んだ方がいいです</p>
<p>★★★★★</p>
<p>とても読みやすい内容で、今起業されている方や、これから起業する方にも読んでもらいたいです。自分の強み、想い、情熱を引き出してくれるのがこのブランディング名刺だと思います。</p>
</div>
</div>
<div class="right-box"><div class="triangle1"></div></div>
<div class="right-box alignright">
<img src="https://cyp-design.com/lp/wp-content/plugins/my-snow-monkey/img/voice2.png" />
</div>
</div>



【CSS】
.balloon1-left{box-shadow:10px 10px 15px -10px #cccccc;}
.balloon1-right{box-shadow:-10px 10px 15px -10px #cccccc;}
@media screen and (min-width: 482px) {/*PC*/
.voice-block{
	display: -webkit-flex;
	display: flex;
}
.left-box:nth-of-type(1){
	padding-right:20px;
	/*background-color:#966;*/
}
.left-box:nth-of-type(3), .right-box:nth-of-type(1){
	width:90%;
	font-size:90%;
	/*background-color:#93F;*/
}
.right-box:nth-of-type(3){
	/*padding-left:10px;*/
	/*background-color:#966;*/
}

.left-box p:nth-of-type(1), .right-box p:nth-of-type(1){
	font-weight:bold;
	font-size:1.4em!important;
}
.left-box p:nth-of-type(2), .right-box p:nth-of-type(2){
	color:#f1a416;
	font-size:1.4em!important;
}

.triangle2{
	margin-top:30px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid #f7f7f7;
	border-bottom: 20px solid transparent;
}
.triangle1{
	margin-top:20px;
  width: 0;
  height: 0;
  border-left: 20px solid #f7f7f7;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.balloon1-left, .balloon1-right{
	padding: 15px 30px;
	background: #f7f7f7;
	border-radius: 10px;	
}

.left-padd{padding-right:10%!important;}
.right-padd{padding-left:10%!important;}

}
@media screen and (max-width: 481px)  {/*SP*/
.voice-block{
	display: -webkit-flex;
	display: flex;
}
.left-box:nth-of-type(1){
	padding-right:20px;
	/*background-color:#966;*/
}
.left-box:nth-of-type(3), .right-box:nth-of-type(1){
	width:90%;
	font-size:90%;
	/*background-color:#93F;*/
}
.right-box:nth-of-type(3){
	/*padding-left:10px;*/
	/*background-color:#966;*/
}


.left-box p:nth-of-type(1), .right-box p:nth-of-type(1){
	font-weight:bold;
	font-size:1.2em!important;
}
.left-box p:nth-of-type(2), .right-box p:nth-of-type(2){
	color:#f1a416;
	font-size:1.4em!important;
}

.triangle2{
	margin-top:30px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid #f7f7f7;
	border-bottom: 20px solid transparent;
}
.triangle1{
	margin-top:20px;
  width: 0;
  height: 0;
  border-left: 20px solid #f7f7f7;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.balloon1-left, .balloon1-right{
	padding: 15px 10px;
	background: #f7f7f7;
	border-radius: 10px;	
}
}

フキダシの基本２

【HTML】
<div class="balloon1-left">
        <p></p>
</div>



/*フキダシ　左向き*/
.balloon1-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 15px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 10px;
}

.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}

.balloon1-left p {
  margin: 0;
  padding: 0px 10px;
}



/*フキダシ　右向き*/
.balloon2-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 15px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ffeeee;
  border-radius: 10px;
}

.balloon2-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #ffeeee;
}

.balloon2-right p {
  margin: 0;
   padding: 0px 10px;
}

フキダシ下

【HTML】
<div class="balloon3">
	<p></p>
</div>


/*フキダシ　下向き*/
.balloon3{
  position: relative;
  padding: 10px 20px;
  background-color: #d90000;
  width:30%;　//全画面の場合はここから下3行はいらない
  margin-left:auto;
  margin-right:auto;
}
.balloon3::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #d90000;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

.balloon3 p {
  margin: 0;
  padding: 5px 30px;
  text-align:center;
}