Question

enter image description here

如何仅使用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

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

这是一个工作的掠夺者：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才能适合角度。此外，更改哪些边框（和位置）将允许您将边框放置在所需图像的任何一个角落，例如：顶部+左侧=左上角，顶部+右侧=右上角等

Answer 2

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

  -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％的浏览器，需要更改图像。

我用PHP扩展编辑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 3

这将是您正在寻找的简单实现：

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

使用CSS将35度徽章剪切成图像

3 个答案: