用 CSS 将 35 度徽章剪成图像

Question

我应该如何在左上角创建这个只有 CSS 的白色徽章？我是按方法创建的，但我认为它真的很糟糕。我创建了一个白色区域（矩形），我将其转换了 35 度，并尝试将其尽可能好地放置在这个角落。对齐徽章的文本我用同样的方法做了，但它不是很漂亮而且我有一些问题，就像你在上图中看到的那样。我很好奇你们会怎么做？

我的尝试：

HTML:

<div class="item-img"><a href="images/packages/background01.jpg" rel="imagebox" title="SockMonkee"><img src="images/packages/background01.jpg" alt=""/><div class="overlay zoom"></div></a></div>
<div class="checkout-badge">
    <div class="checkout-price"><span>€</span>30</div>
</div>

CSS:

.checkout-badge {
    height: 100px;
    width: 200px;
    text-align: center;
    transform: rotate(-35deg) translateY(0);
    background-color: #fff;
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 14px;
}

.checkout-price {
    color: #2da0ce;
    font-size: 40px;
    font-weight: bold;
    padding-top: 50px;
}

.checkout-price span {
    font-size: 30px;
    margin-right: 10px;
    font-weight: normal;
    margin-left: -60px;
}

Answer 1

转换的浏览器兼容性：旋转

  -webkit-transform: rotate(7.5deg);  /* Chrome, Safari 3.1+
     -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15
      -ms-transform: rotate(7.5deg);  /* IE 9
       -o-transform: rotate(7.5deg);  /* Opera 10.50-12.00
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera 12.10+
}

过渡的浏览器兼容性

  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

透明在IE8中不起作用
根据 StatCounter 截至 2014 年 12 月，美国使用的浏览器中有 15% 是 IE8

要在 100% 的浏览器上工作，需要更改图像。

我会使用 GD 扩展名编辑 PHP 中的图像文件。那么我就不必担心浏览器的兼容性了。

这是在预制作过程中上传图像的情况：

可选：获取图像和类型并按大小缩放。
这是确保图像类型的防弹方法

if( is_uploaded_file($_FILES['image1']['tmp_name']) || !($_FILES['image1']['error'] !== UPLOAD_ERR_OK)){
  $save = false;
  $jspan = '';
  $gspan = '';
  $pspan = '';
  switch(strtolower($_FILES['image1']['type'])){
  case 'image/jpeg':
    $image = @imagecreatefromjpeg($_FILES['image1']['tmp_name']);
    if ($image !== false){$save = true;break;}
  case 'image/png':
    $image = @imagecreatefrompng($_FILES['image1']['tmp_name']);
    if ($image !== false){$save = true;break;}
  case 'image/gif':
    $image = @imagecreatefromgif($_FILES['image1']['tmp_name']);
    if ($image !== false){$save = true;break;}
  default:
    $img = @getimagesize($_FILES['image1']['tmp_name']);
    switch(strtolower($img['mime'])){
    case 'image/jpeg':
      $image = @imagecreatefromjpeg($_FILES['image1']['tmp_name']);
      if ($image !== false){$save = true;break;}
    case 'image/png':
      $image = @imagecreatefrompng($_FILES['image1']['tmp_name']);
      if ($image !== false){$save = true;break;}
    case 'image/gif':
      $image = @imagecreatefromgif($_FILES['image1']['tmp_name']);
      if ($image !== false){$save = true;break;}
    default:
      $filename = $_FILES['image1']['name'];
      $ext = substr($filename,-3);
      switch(strtolower($ext)){
      case 'jpg':
        $image = @imagecreatefromjpeg($_FILES['image1']['tmp_name']);
        if ($image !== false){$save = true;break;}
      case 'gif':
        $image = @imagecreatefromgif($_FILES['image1']['tmp_name']);
        if ($image !== false){$save = true;break;}
      case 'png':
        $image = @imagecreatefrompng($_FILES['image1']['tmp_name']);
        if ($image !== false){$save = true;break;}
      default:
        $image = @imagecreatefromjpeg($_FILES['image1']['tmp_name']);
        if ($image !== false){$save = true;break;}
        $image = @imagecreatefrompng($_FILES['image1']['tmp_name']);
        if ($image !== false){$save = true;break;}
        $image = @imagecreatefromgif($_FILES['image1']['tmp_name']);
        if ($image !== false){$save = true;break;}
      }
    }
  }
}
 if ($save === true){
  $originalWidth  = imagesx($image);
  $originalHeight = imagesy($image);
  $scale      = min($previewWidth/$originalWidth, $previewHeight/$originalHeight);
  $newWidth  = ceil($scale*$originalWidth);
  $newHeight = ceil($scale*$originalHeight);
  $newPic = imagecreatetruecolor($newWidth, $newHeight);
  imagecopyresampled($newPic, $image,0, 0, 0, 0,$newWidth, $newHeight, $originalWidth, $originalHeight);

可选：找到最佳图像类型

  ob_start();
  imagejpeg($newPic, NULL, 70);
  $jpg = ob_get_clean();
  ob_clean();
  ob_end_flush();
  $jLen = strlen($jpg);
  ob_start();
  imagepng($newPic, NULL, 9);
  $png = ob_get_clean();
  ob_clean();
  ob_end_flush();
  $pLen = strlen($png);
  ob_start();
  imagegif($newPic);
  $gif = ob_get_clean();
  ob_clean();
  ob_end_flush();
  $gLen = strlen($gif);
  if ($gLen < $jLen){
    if ($pLen < $gLen){
      $raw = $png;
      $png = null;
      $type = 'png';
      $pspan = '<span class="size">';
    }
    else{
      $raw = $gif;
      $gif = null;
      $type = 'gif';
      $gspan = '<span class="size">';
    }
  }
  elseif($pLen < $jLen){
    $raw = $png;
    $png = null;
    $type = 'png';
    $pspan = '<span class="size">';
  }
  else{
    $raw = $jpg;
    $jpg = null;
    $type = 'jpg';
    $jspan = '<span class="size">';
  }

以上是可选的
以上可以替换为：

$image = @imagecreatefromjpeg(/home/user/public_html/images/image.jpg');

此代码的其余部分将花费几毫秒的时间来执行。
在创建 HTML.

时它会很好地运行

创建带有文本的白色标签并旋转

$canvas = imagecreatetruecolor(200, 200);
$white = imagecolorallocate($canvas, 255, 255, 255);
$im = imagecreate(100, 100);
$string = '€ 30';
$bg = imagecolorallocate($im, 255, 255, 255);
$blue = imagecolorallocate($im, 0, 0, 255);
imagechar($im, 0, 50, 20, $string, $blue);
$corner = imagerotate($im, 45, 0);

将白角合并到缩放后的新图像上。

imagecopymerge($newPic , $corner , 10, 10, 0, 0, 100, 47, 75);

我更喜欢使用 base64 图像并将它们放在 HTML 中以保存每个图像的所有 HTTP 请求。

$base64 = base64_encode($raw);
$image = "<img  width=\"$newWidth\" height=\"$newHeight\" src=\"data:image/$type;base64,$base64\" "/>";


  $image = mysql_escape_string($image );
  @mysql_unbuffered_query("UPDATE `photos` SET `image `='$image ' WHERE `id`=$id");

保存图片

  $filename = "image$id." . $type;
  $fp = fopen($filename  ,"w");
  fwrite($fp, $raw);
  fclose($fp);
  imagedestroy($newPic);

这个过程只需要几毫秒。一直在上传。

因此，如果即时执行而不是上传图片：将前两秒的代码替换为：

$filename = "/home/user/pic/$imagename";
$imgage = imagecreatefromjpeg($filename);

Answer 2

就我个人而言，我不会渲染整个矩形。我会用 CSS 构建一个三角形并将其覆盖在角落里。这意味着您的徽章不会包含其他元素。这是一篇不错的文章，介绍了您可以单独使用 CSS 制作的各种形状：http://css-tricks.com/examples/ShapesOfCSS/

这是一个有效的 plunker：http://plnkr.co/edit/nQsU9KESJ7ZLVkwHlDPQ?p=preview

这是 HTML。我还将徽章包含在包含图像的 div 中。

<div class="item-img">
    <a href="images/packages/background01.jpg">
        <img src="images/packages/background01.jpg">
    </a>
    <div class="checkout-badge">
        <div class="checkout-price"><span>€</span>30</div>
    </div>
</div>

这是CSS：

.item-img {
  position: relative;
  border: 1px solid #009;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.checkout-badge {
  width: 0;
  height: 0;
  border-top: 75px solid #fff;
  border-right: 105px solid transparent;
  position: absolute; 
  top: 0;
  left: 0;
}

.checkout-price {
  color: #2da0ce;
  font-weight: bold;
  position: absolute;
  top: -55px;
  left: 15px;
  transform: rotate(-35deg);
}

我会玩弄数字和风格。您可以调整边框宽度以制作不同类型的三角形。使用相同的宽度会产生一个等腰直角三角形，但您的变换需要 -45deg 才能适合角度。此外，更改边框边（和位置）将允许您将边框放置在您想要的图像的任何角落，例如top + left = 左上，top + right = 右上等

Answer 3

这将是您所寻找内容的简单实现：

.wrap{
  height:200px;
  width:300px;
  position:relative;
  overflow:hidden;
  display:inline-block;
  }
.price{
  position:absolute;
  padding-top:30px;
  top:-10%;
  left:-20%;
  transform:rotate(-35deg);
  background:white;
  width:50%;
  text-align:center;
  color: #2da0ce;
  }

.image1{
    background:url(http://placekitten.com/g/300/200);
  }
.image2{
    background:url(http://placekitten.com/g/300/300);
  }


/*hover effect*/

a, .price{
  transition: all 0.8s;
  }
a:hover{
  opacity:0.5;
  }

.price:hover{
  opacity:100%;
  background: black;
  }

<a href="#" class="wrap image1">
  <div class="price">£20</div>
</a>

<a href="#" class="wrap image2">
  <div class="price">£20</div>
</a>

用 CSS 将 35 度徽章剪成图像

Cut a 35degree badge into a image with CSS

html

css

css-shapes