質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2079閲覧

[css]特定部分だけ切り抜き

moscow3

総合スコア201

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/04/10 08:25

編集2018/04/10 08:29

CSSで次のようなものを作ることはできるのでしょうか?
イメージ説明

html

1<body> 2<div id="huga"> 3<div id="piyo"> 4<body>

css

1#huga{ 2 width:10px; 3 height:10px; 4 background-color:????/*whiteにすると背景色が変わった時に対応できない。*/ 5} 6#piyo{ 7 width:20px; 8 height:20px; 9 background-color:blue 10} 11 12#

huga背景色と同じ色にすることも考えましたが、グラーデーションにしたとき底の部分だけ不自然になりそうなので却下しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/04/10 08:27

本質問と直接は関係ありませんが background-color="blue" では指定は効かないのではないでしょうか。
moscow3

2018/04/10 08:29

すみません、修正しておきました。(まだ間違いがあったら伝えていただけると嬉しいです)
m.ts10806

2018/04/10 08:40

確認したい対象のブラウザなんかもあれば、入れてもらったほうがいいかもしれません。
yoshinavi

2018/04/10 09:19

CSSでの「切り抜き」はブラウザが限られますので、body背景色にグラデーションを入れるのであれば、要素を2個の矩形の組合せで表示するのが、無難ではないでしょうか?
moscow3

2018/04/10 10:07

実際はもう少し複雑な図形なので、「透明化する」というようなのが楽なのです。(下の方のclip-pathがブラウザを考えなければぴったしでした!)
yoshinavi

2018/04/10 10:24

clip-pathは魅力的なのですがね・・・切り抜きが出来ない以上、複雑な形状であれば、画像が現時点では簡単でしょうね。
guest

回答3

0

無理やり感が否めないですが…

HTML

1<div class="foo"> 2 <p class="bar">a</p> 3</div>

CSS

1.foo { 2 position:relative; 3 width:20px; 4 height:20px; 5 background-color: transparent; 6} 7.foo::before, 8.foo::after { 9 position:absolute; 10 content: ''; 11 width:10px; 12 background-color:#333; 13 z-index:-1; 14} 15.foo::before { 16 top:10px; 17 height:10px; 18 background-color:#333; 19} 20.foo::after { 21 top:0; 22 right:0; 23 height:20px; 24 background-color:#333; 25} 26.bar { 27 font-size:12px; 28 color: red; 29}

投稿2018/04/10 08:47

Atsushi_Okumura

総合スコア355

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

clip-pathプロパティリンク内容にCSS Shapesのpolygonを渡せば可能です.

https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

HTML

1<div></div>

CSS

1div{ 2 width: 200px; 3 height: 200px; 4 clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 50% 50%); 5 background-image: linear-gradient(blue, red); 6}

その他にも

  • SVGを背景画像にする
  • 背景を矩形に分割してbackground-image/background-sizeを複数指定する

等のやり方が考えられます.

投稿2018/04/10 08:32

編集2018/04/10 08:43
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moscow3

2018/04/10 08:39

まさかそんな便利なものがあったなんて!ありがとうございました。 (https://caniuse.com/#search=clip-path - IEどころかEdgeにすら対応してないので実用は難しそうですが...//)
defghi1977

2018/04/10 08:40

だったら条件に書いておきましょうよぅ!
guest

0

SVG

HTML

1<div style="position:relative"> 2<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=test" style="position:absolute"> 3<svg version="1.1" width=100 height=100 style="position:absolute;margin-left:25px;margin-top:25px;"> 4 <polygon points="0,100 100,100 100,0 50,0 50,50 0,50" fill-rule="evenodd" stroke="black" fill="lightgreen"/> 5</svg> 6</div>

投稿2018/04/10 10:03

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問