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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:--
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答5件)

id:Mars No.1

回答回数203ベストアンサー獲得回数20

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

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

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

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

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

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

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

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

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

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

id:akiyan

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

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

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

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

2004/10/01 00:05:58
id:Mars No.2

回答回数203ベストアンサー獲得回数20

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

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

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

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

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

id:akiyan

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

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

2004/10/01 00:46:51
id:k-pon No.3

回答回数2ベストアンサー獲得回数0

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

<style>

span {

letter-spacing:-1.5em;

}

span strong {

color:#fff;

z-index:2;

}

</style>

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

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

id:akiyan

ありがとうございます。

2004/10/07 15:36:23
id:tanpa No.4

回答回数72ベストアンサー獲得回数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>

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

id:akiyan

ありがとうございます。

2004/10/07 15:37:18
id:ktok No.5

回答回数41ベストアンサー獲得回数0

ポイント90pt

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

CSS tutorial - Using borders to produce angled shapes

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

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

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

id:akiyan

正にこれです!

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

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

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

2004/10/07 15:40:38

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません