私はCSS3で遊んでいて、角が切り取られたボックスを作成しています。
コードは次のとおりです。
.boxcornerscutted {
background: #ffffff;
background:
-moz-linear-gradient(45deg, transparent 10px, #ffffff 10px),
-moz-linear-gradient(135deg, transparent 10px, #ffffff 10px),
-moz-linear-gradient(225deg, transparent 10px, #ffffff 10px),
-moz-linear-gradient(315deg, transparent 10px, #ffffff 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #ffffff 10px),
-o-linear-gradient(135deg, transparent 10px, #ffffff 10px),
-o-linear-gradient(225deg, transparent 10px, #ffffff 10px),
-o-linear-gradient(315deg, transparent 10px, #ffffff 10px);
background:
-webkit-linear-gradient(45deg, transparent 10px, #ffffff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #ffffff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #ffffff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #ffffff 10px);
padding:9px 9px;
margin-top: -30px;
margin-bottom: -15px;
}
div.boxcornerscutted {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
Chrome、Opera、Safari、Mozillaで完全に動作しますが、IEでは(明らかに)問題があります。IEで同じ(または同様の効果)を再現する方法のヒントはありますか?