web-dev-qa-db-ja.com

CSSボックスの傾斜角

私はCSSを少しの間遊んでいますが、通常のボックスを使用しようとしていますが、左上の角は45度の角度で切れています。少なからず。私はその角度でカットされた非常に大きなコーナーを見ています。この効果：

http://tadesign.net/corner.jpg

どうすればいいですか？

csscss3css-shapes
20
Mach

説明

Slantastic（ http://meyerweb.com/eric/css/Edge/slantastic/demo.html ）は古いブラウザをサポートしています。 CSS3固有の場合は、CSSポリゴンを試してください： http://alastairc.ac/2007/02/dissecting-css-polygons/ 。

コード

HTML：

<div class="cornered"></div>
<div class="main">Hello</div>

CSS：

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

結果： http://jsfiddle.net/mdQzH/

代替コード

境界線セクションで透明な境界線とテキストを使用するには... HTML：

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>

CSS：

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

結果： http://jsfiddle.net/76EUw/2

20
Ray Toal

これは、svg clip-path。

利点：

  1. 通常のdivで作業する
  2. シェイプを作成するためのハッキーな境界線はありません
  3. 不均一な背景で簡単に回転できるように、回転を適用しないでください
  4. CSSを介してdiv要素を追加しないので、通常のdiv背景で作業することができます（たとえば、コードを変更する場合）。

次のCSSは、背景を配置できるように、右下隅を切り取ってdivを形成します。

-webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);

オンラインには複数のSVGジェネレーターがあります。

10
JBE

CSS3 linear-gradient() はこの背景を描画できます。

background: linear-gradient(to bottom right, transparent 50px, blue 50px);

body {
  background: linear-gradient(red, orange) no-repeat;
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(to bottom right, transparent 50px, blue 50px);
  margin: 25px auto;
  padding: 50px;
  height: 200px;
  width: 200px;
  color: white;
}
<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>
4
Mohammad Usman

近い将来、 CSS Shapes Module でこれを達成できます。

とともに shape-insideプロパティ-形状に応じてテキストフローを作成できます。

提供する形状は、inset（）、circle（）、ellipse（）、またはpolygon（）のいずれかです。

現在、これはWebkitブラウザーで実行できますが、最初に以下を実行する必要があります： Web Platform からの指示

シェイプ、リージョン、およびブレンドモードを有効にするには：

1）opera：// flags /＃enable-experimental-web-platform-featuresをコピーしてアドレスバーに貼り付け、Enterキーを押します。

2）そのセクション内の「有効にする」リンクをクリックします。

3）ブラウザウィンドウの下部にある[今すぐ再起動]ボタンをクリックします。

あなたがそれをやったなら、これをチェックしてください[〜＃〜] fiddle [〜＃〜]

次のようになります。

enter image description here

<div class="shape">
     Text here
</div>

CSS

.shape{
  -webkit-shape-inside: polygon(65px 200px,65px 800px,350px 800px,350px 80px,160px 80px);
  shape-inside: polygon(65px 200px,65px 450px,350px 450px,350px 80px,160px 80px);
  text-align: justify;
}

多角形の形状を構築するには- このサイト を使用しました

サポートされているさまざまなプロパティの詳細については、こちらをご覧ください こちら

3
Danield

レイトーアルフィドルのレスポンシブフレンドリーなソリューションを思い付きました： http://jsfiddle.net/duk3/hCaXv/

Html：

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello llo hello llo hello hello hello llo hello hello hello hello hello hello hello hello</div>
</div>

Css：

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 100%;
    box-sizing:border-box;
    height: 0px;
    border-bottom: 2em solid red;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
}
.main {
    background-color: red;
    padding: 0 2em;
}

それが役に立てば幸い ！

1
Romainpetit