Фигура на css с заострением

139

30 марта 2017, 18:32

Возможно ли с помощью css выполнить такую рамку:

И вот такую картинку:

С учетом того, что фон может быть не белым и не однотонным (картинка).

На странице очень много таких элементов и картинкой не хотелось бы делать. Но и нужно чтобы ie9 более-менее нормально показывал. clip-path наверное не подойдет.

Answer 1

Можно использовать svg:

<svg viewBox="0 0 390 160" height="300px"> 
 
   <defs> 
      <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="250" x="0" y="0"> 
          <image href="https://placeimg.com/400/250/any" width="400" height="250" x="0" y="0"></image> 
      </pattern> 
   </defs> 
 
   <path d="M -0.23260058,39.395274 C 33.856311,37.905161 41.919946,25.052046 51.902102,0.1249817 59.444781,25.514205 72.238547,39.388432 106.40657,39.395274 V 150.09689 H -0.23260058 Z" style="fill:url(#img1)"></path> 
   <path d="M 126.08309,39.395274 C 160.172,37.905161 168.23564,25.052046 178.21779,0.1249817 185.76047,25.514205 198.55424,39.388432 232.72226,39.395274 V 150.09689 H 126.08309 Z" style="fill:none;stroke:#ff6600;stroke-width:4;"></path> 
 
</svg>