Q&A
ご回答ありがとうございます。
残念ながら、バックに写真を入れた場合に、三角の内側部分は透過されないため、
白い三角になってしまいました。
CSSで吹き出しを作る例として、三角を作成して、その上にずらした三角を背景色と同じで上に重ねることで、枠線付きの吹き出しを作成する例はあったが、
背景を透過するとなると、上に重ねた三角が意味を成さない？ため、
△部分は、背景色もしくは枠線色のベタになってしまう。
これをベタの部分をなしにして、スタイルシートで実現できる、という話を聞いたのだが、実現できていない。
また、この吹き出しの中は、横スクロールする１行のマーキー表示したい。
これらをあわせて実現できる方法が知りたいです。
回答4件
2
lang
1<!DOCTYPE html lang="ja"> 2<html lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 6<script src="jquery.js"></script> 7<script src="jquery-ui.js"></script> 8<style> 9.outer { 10 padding:2em; 11} 12.triangle-isosceles { 13 position: relative; 14 padding: 15px; 15 margin: 1em 0 3em; 16 color: #000; 17 background: #f3961c; 18 border-radius: 10px; 19 20 background: linear-gradient(top, #f9d835, #f3961c); 21 opacity: 0.9; 22 z-index: 10; 23 width: 65%; 24} 25 26/* creates triangle */ 27.triangle-isosceles:after { 28 content: ""; 29 display: block; /* reduce the damage in FF3.0 */ 30 position: absolute; 31 bottom: -15px; 32 left: 50px; 33 width: 0; 34 border-width: 15px 15px 0; 35 border-style: solid; 36 border-color: #f3961c transparent; 37} 38</style> 39<script> 40function typeWriter(selector) { 41 var q = document.querySelector(selector); 42 var txts = q.innerText; 43 var arr = []; 44 for (var i=0;i < txts.length;i++) { 45 var ch = txts.charAt(i); 46 arr.push("<span style='color:red;'>"+ch+"</"+"span>"); 47 } 48 q.innerHTML = arr.join(""); 49 var chArr = q.childNodes; 50 var counter = 0; 51 var sw = 0; 52 function timerFunc() { 53 if (counter < chArr.length) { 54 var ob = chArr[counter++]; 55 ob.style.color = (["blue", "red", "yellow", "green", "snow"])[sw % 5]; 56 setTimeout(function() { 57 timerFunc(); 58 }, 200); 59 } else { 60 sw++; 61 counter = 0; 62 setTimeout(function() { 63 timerFunc(); 64 }, 2000); 65 } 66 } 67 68 timerFunc(); 69} 70 71window.onload = function() { 72 typeWriter(".marquee"); 73} 74</script> 75</head> 76<body> 77<!-- 78 Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/ 79--> 80<div class="outer"> 81 <div style="position: relative; width: 800px; height: 300px;"> 82 <div class="triangle-isosceles"> 83 84 <blockquote><p class="marquee"><span>Hello Speech Bubbles, this text scrolls left direction such as Marquee.</span></p></blockquote> 85 86 </div> 87 88 <div style="position: absolute; left:50px;top: -30px; width: 300px;"> 89 <pre> 90Background text one 91Background text two 92Background text three 93Background text four 94five 95six 96seven 97eight 98nine 99ten 100eleven 101 </pre> 102 </div> 103 </div> 104</div> 105</body> 106</html> 107
utun さん同様、marquee はピクセルずらすのが面倒なのでライブラリ探してください。
この例はタイプライター。
投稿2015/01/29 03:41
総合スコア1693
2
とりあえず三角部分だけですが、
適当に書いてみました。
http://jsdo.it/utun001/iRlP
この三角で使っている、範囲外を非表示にする方法を利用すれば、横スクロールのマーキーも書けると思うので、是非頑張ってみて下さい。
CSSはいろいろとやり様があるので、この方法でなくても特に問題有りません。
CSS3を利用しているので、レガシーブラウザ対応をする場合はもうちょっと小細工が必要になるかもです。
一応ソースも乗っけときます。
lang
1<div class='sankakuwrapper'> 2 <div class='sankaku'> 3 </div> 4</div>
lang
1.sankakuwrapper{ 2 white-space: nowrap; 3 overflow: hidden; 4 width: 53px; 5 padding: 30px 0 30px 30px; 6} 7.sankaku{ 8 border: solid #000000; 9 width: 100px; 10 height: 100px; 11 content: " "; 12 transform: rotate(45deg); 13 background-color: #ffffff; 14}
以上、ご参考になれば幸いです。
投稿2015/01/29 02:53
総合スコア384
回答へのコメント
すいません。
私が質問内容を理解していないのかもしれませんが、透過しても問題無い前提で書いたというだけです。
.sankakuwrapper{
white-space: nowrap;
overflow: hidden;
width: 53px;
padding: 30px 0 30px 30px;
filter:alpha(opacity=50);
opacity: 0.5;
}
この様にalphaを指定すれば三角形ごと透過されると思いますが、これでは不十分という事でしょうか？
ちなみに、CSS3系のものはベンダープレフィックスを省略しているので、ブラウザによっては動きません。
宜しくお願い致します。
>utun様
横から失礼します。
上記コードだと三角の内側を透明にすることは可能ですが、
テキストが入る方の□枠と結合した際に枠側のボーダー線を隠すことができないため、
「背景透過の線だけの吹き出し枠」にならないかと思います。
三角が重なっている部分だけborderの一部を透明にすることができるなら良いのですが
多分そんな都合のいいことはできないですよね…？
私も仕事でそのようなデザインを実装してくれと頼まれて、
「無理ですｗ」と答えてしまったクチなので、もし実現する方法をご存知でしたらご教授いただけますと幸いです。
1
lang
1 2<!DOCTYPE html lang="ja"> 3<html lang="ja"> 4<head> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 7<!-- 8<script src="./JQuery/jquery-2.1.3.min.js"></script> 9--> 10<script src="./jquery-1.11.2.min.js"></script> 11<script src="./jquery.marquee.js"></script> 12<script> 13 14$(function () { 15 $('p.ticker').marquee({direction: "right", pauseOnHover:true, gap:20}); 16 /** Options: default 17 //If you wish to always animate using jQuery 18 allowCss3Support: true, 19 //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function 20 css3easing: 'linear', 21 //requires jQuery easing plugin. Default is 'linear' 22 easing: 'linear', 23 //pause time before the next animation turn in milliseconds 24 delayBeforeStart: 1000, 25 //'left', 'right', 'up' or 'down' 26 direction: 'left', 27 //true or false - should the marquee be duplicated to show an effect of continues flow 28 duplicated: false, 29 //speed in milliseconds of the marquee in milliseconds 30 duration: 5000, 31 //gap in pixels between the tickers 32 gap: 20, 33 //on cycle pause the marquee 34 pauseOnCycle: false, 35 //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause 36 pauseOnHover: false 37 */ 38 39 var wr = $(".js-marquee-wrapper")[0].getBoundingClientRect(); 40 var jr = $(".js-marquee")[0].getBoundingClientRect(); 41 42 43 alert("幅と高さ：" + (wr.right - wr.left) + ", " + (wr.bottom - wr.top) + " || " + "幅と高さ：" + (jr.right - jr.left) + ", " + (jr.bottom - jr.top)); 44 45 $(".triangle-isosceles").css({ 46 height:"1.3em" 47 }); 48 $(".marquee-position blockquote").css({ 49 position: "relative" 50 , top:"-2.1em" 51 , border:"dashed 1px yellow" 52 }); 53}); 54</script> 55 56 57<style> 58.outer { 59 padding:1.0em; 60} 61.triangle-isosceles { 62 position: relative; 63 padding: 1px; 64 margin: 0.5em 0 0.5em; 65 color: #ffffff; 66 background: #0000ff; 67 border-radius: 10px; 68 69 background: linear-gradient(top, #f9d835, #0000ff); 70 opacity: 0.7; 71 z-index: 10; 72 width: 90%; 73} 74 75/* creates triangle */ 76.triangle-isosceles:after { 77 content: ""; 78 display: block; /* reduce the damage in FF3.0 */ 79 position: absolute; 80 bottom: -10px; 81 left: 30px; 82 width: 0; 83 border-width: 10px 10px 0; 84 border-style: solid; 85 border-color: #0000ff transparent; 86} 87</style> 88 89</head> 90<body> 91<!-- 92Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/ 93--> 94<div class="outer"> 95 <div style="position: relative; width: 480px; height: 20px;"> 96 <div class="triangle-isosceles marquee-position"> 97 <blockquote> 98 <p class="ticker">昔ながらのマーキーのようなスクロール表示。</p> 99 </blockquote> 100 </div> 101 102 <div style="position: absolute; left:30px;top: -30px; width: 300px;"> 103 <pre> 104Background text one 105Background text two 106Background text three 107Background text four 108five 109six 110seven 111eight 112nine 113ten 114eleven 115 </pre> 116 </div> 117 </div> 118</div> 119 120</body> 121</html>
投稿2015/02/04 06:05
総合スコア1693
回答へのコメント
marquee の動きがなんとも微妙ですね。
よそ様の作ったものを流用する限り、修正しないで使うならやむを得ないかと。
修正案を求めるならば別スレッドにした方がいいかもしれません。
0
少し前の投稿ですが、これどうにかしたいですよね～
三角重なる部分だけボーダーつけない・・・
今だとSVGで吹き出しを作るっていう選択肢しかないですかね？
SVGなら座標変えてサイズも三角の位置も変えられるし…
CSSでやるなら、吹き出しの下辺以外をボックスで表現して、
下辺と三角はそれぞれ別の要素にするしかないのかな。
どうしても1個無駄な要素が増えてしまう
つД｀)･ﾟ･｡･ﾟﾟ･:.｡..｡.:･ﾟ
サンプル
投稿2016/08/09 05:17
総合スコア1298
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2015/01/29 03:46
2015/01/29 06:34
2015/01/29 06:41
2015/02/02 08:35
2015/02/03 14:30
2015/02/03 14:36
2015/02/04 01:28
2015/02/04 06:03