右の赤枠にある角抜きのデザインにしたいのですが、
上のchromeだと大丈夫なのですが
下のInternet Explorerだとずれてしまいます。
可能であれば、ご教授お願いいたします。
html
1<div class="mainContents"> 2 3<div class="contentOuter"> 4<h1>大見出し</h1> 5<div class="summaryBox"> 6<dl> 7<dt>開催日</dt> 8<dd>2018年〇月〇日(〇)</dd> 9</dl> 10<dl> 11<dt>場所</dt> 12<dd>あああああああああ</dd> 13</dl> 14<a class="link" href="" target="_blank">イベントの主旨や目的はこちらから確認できます<span class="linkIcon-summery linkIcon-img"></span></a> 15 16</div> 17 18<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 19 20</div><!--mainContents-->
css
1 2 3.mainContents { 4position: relative; 5width: 100%; 6padding: 0px 40px; 7margin: 80px 0; 8overflow: hidden; 9} 10 11.mainContents h1{ 12display: block; 13font-size: 2.6875rem; 14font-weight: 700; 15margin-bottom: 40px; 16vertical-align: middle; 17text-align: center; 18} 19 20.mainContents h2 { 21display: block; 22font-size: 2rem; 23font-weight: 700; 24margin-bottom: 40px; 25vertical-align: middle; 26text-align: center; 27} 28 29.mainContents h3 { 30font-size: 1.125rem; 31font-weight: 600; 32margin: 8px 0px 16px; 33} 34 35.mainContents p {margin-bottom: 8px;} 36 37.summaryBox{ 38float: right; 39width: 50%; 40position: relative; 41margin: 0 0 20px 20px; 42padding: 40px; 43background: #f2f2f2; 44background-position: bottom left, bottom right, top right, top left; 45background-repeat: no-repeat; 46font-size: 0.875rem; 47} 48 49.summaryBox::before{ 50content: ""; 51display: block; 52position: absolute; 53background-color: #fff; 54width: 10%; 55padding-top: 10%; 56transform-origin: center center; 57-moz-transform-origin: center center; 58-webkit-transform-origin: center center; 59top: 0; 60margin-top: calc( calc( 10% / -2)); 61left: calc( calc( 10% / -2)); 62transform: rotate(45deg); 63-moz-transform: rotate(45deg); 64-webkit-transform: rotate(45deg); 65} 66 67.summaryBox::after{ 68content: ""; 69display: block; 70position: absolute; 71background-color: #fff; 72width: 10%; 73padding-top: 10%; 74transform-origin: center center; 75-moz-transform-origin: center center; 76-webkit-transform-origin: center center; 77bottom: 0; 78margin-bottom: calc( calc( 10% / -2)); 79right: calc( calc( 10% / -2)); 80transform: rotate(45deg); 81-moz-transform: rotate(45deg); 82-webkit-transform: rotate(45deg); 83} 84 85.summaryBox dl{margin-bottom: 8px;} 86 87.summaryBox dt{ 88float: left; 89font-weight: 600; 90} 91 92.summaryBox dd{padding-left: 60px;} 93
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/20 06:33