title: HTML to pdf not giving correct pdf with all styling
body: <p>I have created a html layout, when I am trying to convert this into pdf it is not giving out put with complete styling.</p>
  
  <p>I have tried two libraries <code>"anam/phantommagick": "^1.0"</code> and <code>"barryvdh/laravel-dompdf": "0.4.*"</code></p>
  
  <p><strong>Here is my code:</strong></p>
  
  <pre><code>&lt;?php ob_start() ?&gt;
      &lt;div class="frame"&gt;
          &lt;div class="horizontal-side top"&gt;&lt;/div&gt;
          &lt;div class="vertical-side left"&gt;&lt;/div&gt;
          &lt;div class="vertical-side right"&gt;&lt;/div&gt;
          &lt;div class="horizontal-side bottom"&gt;&lt;/div&gt;
          &lt;div class="right-top-corner corner-holder"&gt;&lt;img class="right-top corner" src="&lt;?php echo url(); ?&gt;/20*20/hr-uper-1448949720a.jpg"&gt;&lt;/div&gt;
          &lt;div class="right-btm-corner corner-holder"&gt;&lt;img class="right-btm" corner src="&lt;?php echo url(); ?&gt;/20*20/hr-btm-1448949720a.jpg"&gt;&lt;/div&gt;
          &lt;div class="left-top-corner corner-holder"&gt;&lt;img  class="left-top corner" src="&lt;?php echo url(); ?&gt;/20*20/hr-uper-1448949720a.jpg"&gt;&lt;/div&gt;
          &lt;div class="left-btm-corner corner-holder"&gt;&lt;img  class="left-btm corner" src="&lt;?php echo url(); ?&gt;/20*20/hr-btm-1448949720a.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;style&gt;
  
      .frame {
          position: relative;
          width: 500px; /* dynamic*/
          height: 500px; /* dynamic*/
      }
  
      .horizontal-side {
          width: 100%;
          height: 100px; /* height of image*/
          position: absolute;
          /*background-size: 100% 100%;*/
      }
      .horizontal-side.top {
          background: url('&lt;?php echo url(); ?&gt;/20*20/hr-uper-1448949720a.jpg') repeat !important;
      }
      .horizontal-side.bottom {
          background: url('&lt;?php echo url(); ?&gt;/20*20/hr-btm-1448949720a.jpg') repeat !important;
      }
      .horizontal-side.top {
          top: 0 !important;
      }
      .horizontal-side.bottom {
          bottom: 0 !important;
      }
      .vertical-side {
          width: 100px !important; /* width of image*/
          height: 100% !important;
          z-index: 9 !important;
          position: absolute !important;
      }
      .vertical-side.left {
          left: 0 !important;
          background: url('&lt;?php echo url(); ?&gt;/20*20/vrt-left-1448949720a.jpg') repeat !important;
      }
      .vertical-side.right {
          right: 0;
          background: url('&lt;?php echo url(); ?&gt;/20*20/vrt-right-1448949720a.jpg') repeat !important;
      }
      .corner-holder {
          position: absolute !important;
          z-index: 9 !important;
      }
      .right-top-corner{
          right: 0px !important;
      }
      .right-btm-corner {
          bottom: 0 !important;
      }
      .left-top-corner{
          left: 0 !important;
      }
      .left-btm-corner{
          bottom: 0 !important;
          left: 0 !important;
      }
  
      .corner {
          height: 100px !important; /* corner height (size of image)*/
          width: 100px !important; /*  corner width (size of image)*/
      }
      .right-top {
          clip: polygon(100% 0, 0% 100%, 0 0) !important;
          -webkit-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
          -moz-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
          -ms-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
          -o-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
          clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
      } 
      .right-btm{
          clip: polygon(0 100%, 0 0, 100% 100%) !important;
          -webkit-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
          -moz-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
          -ms-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
          -o-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
          clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
      }
      .left-top{
          clip: polygon(100% 0, 0 0, 100% 100%) !important;   
          -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
          -moz-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
          -ms-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
          -o-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
          clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
      }
      .left-btm{
          clip: polygon(100% 0, 0 100%, 100% 100%) !important;   
          -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
          -moz-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
          -ms-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
          -o-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
          clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
      }
    &lt;/style&gt;
  
  
   &lt;?php $html = ob_get_clean(); 
      // by using `barryvdh/laravel-dompdf`
      $name = time() .'.pdf'; 
      $pdf = App::make('dompdf');
      $pdf-&gt;loadHTML($html);
      $pdf-&gt;save(public_path().'/' . $name);
  
      // by using `anam/phantommagick`
      $conv = new \Anam\PhantomMagick\Converter();
      $conv-&gt;source($html)
      -&gt;toPdf()
      -&gt;save(public_path().'/' . $name);
  </code></pre>
  
  <p>I am not getting the proper pdf as per the html.</p>
  
  <p>Can some one please tell me what is wrong here.</p>
  
  <p>Thanks</p>