new-mark

by hondana

HTML

<div class="post_photo">
	    <div class="new_bg">
	    	<span class="new">New</span>
	    </div>
	    <img src="https://hon-dana.org/img/sample-ph.jpg" alt="sample" />
	</div>

	<div class="post_photo_se">
	    <div class="new_bg">
	    	<span class="new">New</span>
	    </div>
	    <img src="https://hon-dana.org/img/sample-ph.jpg" alt="sample" />
	</div>

	<div class="post_photo_th">
	    <div class="new_bg">
	    	<span class="new">New</span>
	    </div>
	    <img src="https://hon-dana.org/img/sample-ph.jpg" alt="sample" />
	</div>

	<div class="post_photo_four">
	  <span class="new_fo">NEW!</span>
	  <img src="https://hon-dana.org/img/sample-ph.jpg" alt="sample" />
	</div>

	<div class="ribbon_new">
	  <div class="new_area">
	    <span class="new_fi">NEW</span>
	  </div>
	    <img src="https://hon-dana.org/img/sample-ph.jpg" alt="sample" />
    </div>

    <div class="ribbon_new_sec">
	  <span class="new_area_sec">NEW</span>
	  <div>
	    <img src="https://hon-dana.org/img/sample-ph.jpg" alt="sample" />
	  </div>
    </div>

CSS

*, *:after, *:before {
			-webkit-box-sizing:
			border-box;
			-moz-box-sizing:
			border-box;
			box-sizing:
			border-box;
			
		}
body, html { 
			font-size: 100%;
		    padding: 0;
		    margin: 0;
		    font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		}
img{
	margin: 0;
	padding: 0;
	vertical-align:bottom;
}
		.post_photo{
			width: 320px;
			margin: 100px auto;
			padding: 0;
			position: relative;
		}
		.post_photo img{
			position: relative;
			z-index: 1;
		}
		.post_photo .new_bg{
			position: absolute;
			top: 0;
            left: 0;
            z-index: 2;
		}
		.post_photo .new_bg::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 80px 80px 0 0;
			border-color: #FF0000 transparent transparent transparent;
			filter:alpha(opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;
		}
		.post_photo .new_bg .new{
			position: absolute;
			top: 15px;
            left: 5px;
            z-index: 3;
            color: #fff;
            transform: rotate(-45deg);
		}
		


		.post_photo_se{
			width: 320px;
			margin: 100px auto;
			padding: 0;
			position: relative;
		}
		.post_photo_se img{
			position: relative;
			z-index: 1;
		}
		.post_photo_se .new_bg{
			position: absolute;
			top: 0;
            left: 0;
            z-index: 2;
		}
		.post_photo_se .new_bg::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 80px 80px 0 0;
			border-color: #ff0000 transparent transparent transparent;
			filter:alpha(opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;
		}
		.post_photo_se .new_bg::after{
			content: "";
			position: absolute;
			border: dashed 0px white;
			box-shadow: 0px 0px 0px 10px #ff0000;
			filter:alpha(opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;

		}
		.post_photo_se .new_bg...