人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートで3角形を作り出す方法のサンプルや解説のあるページを教えて下さい。

●質問者: akiyan
●カテゴリ:ウェブ制作
✍キーワード:スタイルシート
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● Mars
●0ポイント

http://tohoho.wakusei.ne.jp/wwwvml.htm

そのファイルは現在ありません

3角形を作り出す方法ではないのでポイント不要です。

#ダメもとで質問されているのかもしれませんが・・・

スタイルシートでは図形を作りだす事は不可能です。

htmlの要素に対してボーダーや背景色をつけることで四角形を作れているような印象があるのかもしれませんが、元のボックスが要素として存在しているから出来ている事です。

逆に、htmlで三角形の要素を作る事ができれば、cssでボーダーや背景も指定できるでしょうけど。

VMLとかSVGを調べた方が求めている答えに近いのかもしれませんね。

http://www.atmarkit.co.jp/fxml/askxmlexpert/026svg/26svg.html

SVGとはどんな言語ですか? 利用する方法は?

◎質問者からの返答

ご回答有難うございます。

ボックスの考え方やVML、SVGについては存じております。

何らかの裏ワザ的に三角形を作っていたと思われるサイトを見かけたことがあるので質問しました。

ただ、1度見かけただけなのでVMLかSVGだったのかもしれません...


2 ● Mars
●0ポイント

http://hp.vector.co.jp/authors/VA029562/filter/matrix.html

逆質問ですのでポイント不要です。

どんな三角形だったのでしょうか?

<img>の代わりみたいな▲?

それともテキストとかを含んだブロックそのものが三角だったのでしょうか?

「三角」をフィルターで変形させたものだったのかも。

◎質問者からの返答

の代わりみたいな▲」でした。

フィルターですか...なるほど、そういうやり方もあり得ますね。


3 ● k-pon
●0ポイント

■◆を使ってletter-spacingなりでやるという方法はあるにはあるんではないでしょうか。

<style>

span {

letter-spacing:-1.5em;

}

span strong {

color:#fff;

z-index:2;

}

</style>

<span>◆<strong>■</strong></span>

背景色やfontサイズを綿密に計算する必要はあるかもしれませんが・・・。:beforとかを使えば無駄はないのかもしれません。Marsさんが不可能とおっしゃっていたので足掻いてみただけです、笑。俺もポイントは不要です。

◎質問者からの返答

ありがとうございます。


4 ● tanpa
●0ポイント

<div style=”position: relative”>

<div style=”position: absolute; font-size: 120px; color: #EE88EE; ”>▲</div>

<div style=”position: absolute; font-size: 60px; left:30px; top:44px; color: #88EE88; ”>▼</div>

</div>

文字の三角でで遊んでみました。

◎質問者からの返答

ありがとうございます。


5 ● ktok
●90ポイント

http://www.howtocreate.co.uk/tutorials/slopes.html

CSS tutorial - Using borders to produce angled shapes

ここ、英文ですが、参考になりますでしょうか?

ちなみに検索キーワードは、「triangle CSS HTML」としてみました。

まとはずれでしたら申し訳ありません。

◎質問者からの返答

正にこれです!

font-size:0pxでborderなんですね...なるほど。

validなHTMLからはちょっと外れてしまいますが、今のCSSではこれが限界っぽいですね。

参考になりました。ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ